SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Jun 2013
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Begginer stuck on events

    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)...


    Code JavaScript:
     
    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. #2
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    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.
    Tab-indentation is a crime against humanity.

  3. #3
    SitePoint Member
    Join Date
    Jun 2013
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There are no errors in the console. Here's the form.

    Code HTML4Strict:
    <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. #4
    SitePoint Mentor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,255
    Mentioned
    32 Post(s)
    Tagged
    4 Thread(s)
    Hi good_boy,

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

  5. #5
    SitePoint Member
    Join Date
    Jun 2013
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    SitePoint Mentor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,255
    Mentioned
    32 Post(s)
    Tagged
    4 Thread(s)
    I got the code working OK in Chrome, using this markup:
    HTML Code:
    <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:
    Code JavaScript:
    function formSetup(evn) {
        setup.cancelEvent(evn); // Added this line to prevent form submit

  7. #7
    SitePoint Member
    Join Date
    Jun 2013
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #8
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by fretburner View Post
    I got the code working OK in Chrome, using this markup:
    HTML Code:
    <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>
    Before adding the submit button, what action were you performing to submit the form?
    Tab-indentation is a crime against humanity.

  9. #9
    SitePoint Mentor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,255
    Mentioned
    32 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Logic Ali View Post
    Before adding the submit button, what action were you performing to submit the form?
    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:
    HTML Code:
    <!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. #10
    SitePoint Member
    Join Date
    Jun 2013
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #11
    SitePoint Member
    Join Date
    Jun 2013
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •