How do I get a return value from a Handler function in JavaScript?

Question

I am able to get the information from the object I am using to store the form information, when the one tries to fire the submit without filling in the fields successfully, but when I enter all the information correctly I can't seem to obtain the same upon success?

      var theForm = document.getElementsByTagName('form')[0];
      var firstNameInput = document.getElementById('firstNameInput');
      var lastNameInput = document.getElementById('lastNameInput');
      var emailInput = document.getElementById('emailInput');
      var stateInput = document.getElementById('stateInput');

      var theButton = document.querySelector('input[type=submit]');

      // Wire the form's submit event to a callback
      theForm.addEventListener('submit', validate);

      function validate(e) {

          // Error tracking variable
          var error = false;

          // Do validations
          var emailPattern = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

          var formData = {
              'firstName': null,
              'lastName': null,
              'email': null,
              'stateInput': null
          }

          if ((firstNameInput.value == '') || (firstNameInput.value == null)) {
              firstNameInput.classList.add('invalid-input');
              firstNameInput.nextElementSibling.style.display = 'block';
              firstNameInput.nextElementSibling.innerHTML = 'Not valid!';
              error = true;
          }

          if ((lastNameInput.value == '') || (lastNameInput.value == null)) {
              lastNameInput.classList.add('invalid-input');
              lastNameInput.nextElementSibling.style.display = 'block';
              lastNameInput.nextElementSibling.innerHTML = 'Not valid!';
              error = true;
          }

          if (!emailPattern.test(emailInput.value)) {
              emailInput.classList.add('invalid-input');
              emailInput.nextElementSibling.style.display = 'block';
              emailInput.nextElementSibling.innerHTML = 'Please enter valid email address!';
              error = true;
          }

          if ((stateInput.value == 'selectstate')) {
              stateInput.classList.add('invalid-input');
              stateInput.nextElementSibling.style.display = 'block';
              stateInput.nextElementSibling.innerHTML = 'Not valid!';
              error = true;
          }

          // If error, stop the event
          if (error) {
              e.preventDefault();
              e.stopPropagation();
              console.log('There is no data from the form: ');
              for (var prop in formData) {
                  console.log(prop + ' : ' + formData[prop]);
              }
              return false;

          } else {

              formData['firstName'] = firstNameInput.value;
              formData['lastName'] = lastNameInput.value;
              formData['email'] = emailInput.value;
              formData['stateInput'] = stateInput.value;
              console.log('There is now data from the form: :) ');
              for (var prop in formData) {
                  console.log(prop + ' : ' + formData[prop]);
              }
              return true;
          }
      }

I tried this:

var result = theForm.addEventListener('submit', validate);

  if (result) {
    console.log(result);
  }

Any help would be appreciated!

You should be aware that `theForm.addEventListener` just installs the listener, but the listener is not executed until you actually submit the form. Therefore, the result can only tell you if the installation of the listener was successful. — Erich Kitzmueller, May 03 '17 at 13:38
You don't get any return values. [The callback isn't even executed yet](http://stackoverflow.com/q/23667086/1048572) — Bergi, May 03 '17 at 13:40
Thanks guys, basically i'd like to get some kind of feedback to appear to the console and maybe used later in a view? — Antonio Pavicevac-Ortiz, May 03 '17 at 13:52

score 0 · Answer 1 · answered May 03 '17 at 13:44

0

According to w3schools.com, this function, addEventListener() does not return anything.

https://www.w3schools.com/jsref/met_element_addeventlistener.asp

If you'd like to know if the event listener is installed properly, you need to check if the function exists:

if(theForm.addEventListener){
    theForm.addEventListener('submit', validate);
}else{
    theForm.attachEvent('onclick', validate);
}

answered May 03 '17 at 13:44

Lan Zang

56
3

Essentially...like I mentioned in the comments above i'd like to use that object in the function to display the data. Using it for a console.log or maybe in a template/view later. Thanks for responding Lan! – Antonio Pavicevac-Ortiz May 03 '17 at 14:01

How do I get a return value from a Handler function in JavaScript?

1 Answers1