Begginer stuck on events

JavaScript
1

Greeting to everyone.

I began working on Javascript about 3 day ago and im stuck on forms and submiting of them. I’m using ‘Learnin JavaScript’ by o’Reilley and in there is this example (not the same but it works the same)…



window.onload = execute;

var setup = {
   catchEvent : function(eventObj, event, eventHandler) {
      eventObj.addEventListener(event, eventHandler, false);
   },

   cancelEvent : function(event) {
      if(event.preventDefault) {
	     event.preventDefault();
		 event.stopPropagation();
	  }
   }
}

function formSetup(evn) {
   var options = document.exp_form.mjesto.options;

   for(var i = 0; i < options.length; i++) {
      if(options[i].selected) {
	     console.log('You have selected ' + options[i].text);
	  }
   }

   return false;
}

function execute() {
   setup.catchEvent(document.exp_form, 'submit', formSetup);
}

So, the event gets added to the form the minute the page loads. The function loaded is formSetup but the form doesn’t enter in that function. If i put an alert(), its not executed. formSetup() function is not binded with the event, but why?

2 
document.exp_form

This may not be the cause, but elements should not be referenced by name.

If there are no errors in the console, show the entire page.

3

There are no errors in the console. Here’s the form.


<form action='' method='POST' name='exp_form' id='form-id'>
   <p><label>Ime</label><input type='text' name='ime'></p>
   <p><label>Prezime</label><input type='text' name='prezime'></p>
   <p><label>Mobitel</label><input type='text' name='mob'></p>
   <p>
      <label>Mjesto boravka</label>
	  <select name='mjesto' id='mjesto-select'>
	     <option value='osijek'>Osijek</option>
	     <option value='karlovac'>Karlovac</option>
	     <option value='zagreb'>Zagreb</option>
	     <option value='split'>Split</option>
	     <option value='zadar'>Zadar</option>
	  </select>
   </p>
</form>

I tried fetching the form object with document.getElementById(‘form-id’) but with the same effect. I tried the traditional event handling with onsubmit but with also sam effect. Program flow doesn’t get into the formSetup() function.

Thank you for helping.

4

Hi good_boy,

What browser are you using? addEventListener doesn’t work in < IE9.

5

its firefox. addEventListener is tested and it works with other events. submit event seems to don’t work. i also tried preventDefault() for stopping the submitting but he’s not even entering the binded function.

6

I got the code working OK in Chrome, using this markup:


<form name="exp_form">
    <select name="mjesto">
        <option value="grape">Grape</option>
        <option value="orange">Orange</option>
        <option value="banana">Banana</option>
    </select>

    <input type="submit" name="submit" />
</form>

and making this small change to the formSetup function:

function formSetup(evn) {
    setup.cancelEvent(evn); // Added this line to prevent form submit
7

i tried that in Chrome but it doesn’t work and i already tried that but i didn’t call the cancelEvent() but just evn.stopPropagation() but it didn’t work. Try adding alert() in the formSetup(). i tried and its not entering the function when the submit button is clicked. I’m not sure, but i think that console.log is not working in chrome so the only way to now that it works is an alert() and that is not executing.

Thanks for the help.

8

Before adding the submit button, what action were you performing to submit the form?

9

I wasn’t. If you hit return while the focus is on one of the text inputs, the form will submit but only if there’s a submit button present in the form.

Good_boy, I’ve used your form markup and as long as there’s a submit button present, the code works fine for me:


<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Test Page</title>
  </head>
  <body>
    <form action='' method='POST' name='exp_form' id='form-id'>
       <p><label>Ime</label><input type='text' name='ime'></p>
       <p><label>Prezime</label><input type='text' name='prezime'></p>
       <p><label>Mobitel</label><input type='text' name='mob'></p>
       <p>
          <label>Mjesto boravka</label>
          <select name='mjesto' id='mjesto-select'>
             <option value='osijek'>Osijek</option>
             <option value='karlovac'>Karlovac</option>
             <option value='zagreb'>Zagreb</option>
             <option value='split'>Split</option>
             <option value='zadar'>Zadar</option>
          </select>
       </p>
       <input type="submit">
    </form>
    <script>
        window.onload = execute;
 
        var setup = {
           catchEvent : function(eventObj, event, eventHandler) {
              eventObj.addEventListener(event, eventHandler, false); 
           },
         
           cancelEvent : function(event) {
              if(event.preventDefault) {
                 event.preventDefault();
                 event.stopPropagation();
              }
           }
        }
         
        function formSetup(evn) {
           setup.cancelEvent(evn);
           var options = document.exp_form.mjesto.options;
           
           alert("Hi there!");
         
           for(var i = 0; i < options.length; i++) {
              if(options[i].selected) {
                 console.log('You have selected ' + options[i].text);
              }
           }
         
           return false;
        }
         
        function execute() {
           setup.catchEvent(document.exp_form, 'submit', formSetup);
        }
    </script>
  </body>
</html>
10

That is it. Its an example from a book, somewhat different thou, but a same principle.
I got it to work but i don’t know how. Every time my browser gets a little weard, starts
taking a lot of ram memory, i reset it to factory settings. Thats what i did now and it
worked in firefox.

Thank you for your help and time.

11

Oh damn. The submit button. I am so so so so sorry. On that page i had 3 forms to check how that works as an array. In the second form i only had a submit button so i thought that was the button for the code i putted here. After i reseted it, i deleted all the forms and made a new one.

****. Sorry for wasting your time. I’m a sotons spawn a deserve to die for being stupid.