SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    adding an onsubmit to a form using addEventListener/attachEvent

    hi

    I don't have access to the HTML code, only the JavaScript code.
    I want the "submit" button(s) to become disable when a user submits a certain form called "mform1"

    submitWait() (code bellow) seems to work only for FireFox but not for IE8.
    "this" seems to have no properties in IE8 at submitWait()

    suggestions ?

    here is the HTML code:
    HTML Code:
    <form id="mform1" name="mform1" enctype="multipart/form-data" method="post" >
    <input type=file><br />
    name: <input type="text" ><br />
    <input type="button" value="just a button"><br />
    <input type="submit" value="submit" value="submit"><input type="submit" value="submit and view">
    </form>
    here is the the Javascript code:
    Code:
    if (window.addEventListener){   
        window.addEventListener('load', attachFormSubmit, false); 
    } else if (window.attachEvent){ 
        window.attachEvent('onload', attachFormSubmit );
    }
    
    function attachFormSubmit(){
    	theForm = document.getElementById("mform1");
    	
    	if (theForm.addEventListener){			
          		theForm.addEventListener('submit', submitWait, false); 
        } else if (theForm.attachEvent){			
          		theForm.attachEvent('onsubmit', submitWait);
        }
    }
    
    function submitWait(){ 	
    	if (document.all || document.getElementById) {
    		for (i = 0; i < this.length; i++) {
    		var formElement = this.elements[i];
    			if (formElement.type == "submit") {
    				formElement.disabled = true;
    			}
    		}
    	}
    }

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,939
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    I rewrote your function to disable the submit buttons.
    This will work in all browsers.
    I added a return false; so that you can see it ta

    Hope this helps you.

    HTML Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Disable submit example</title>
      </head>
      
      <body>
        <form id="mform1" name="mform1" enctype="multipart/form-data" method="post" >
          <input type=file><br />
          Name: <input type="text" ><br />
          <input type="button" value="just a button"><br />
          <input type="submit" value="submit" >
          <input type="submit" value="submit and view">
        </form>
        
        <script>
          //Cross browser add listener
          // http://stackoverflow.com/questions/10149963/adding-event-listener-cross-browser
          function addEvent(elem, event, fn) {
            function listenHandler(e) {
              var ret = fn.apply(this, arguments);
              if (ret === false) {
                e.stopPropagation();
                e.preventDefault();
              }
              return(ret);
            }
            
            function attachHandler() {
              var ret = fn.call(elem, window.event);   
              if (ret === false) {
                window.event.returnValue = false;
                window.event.cancelBubble = true;
              }
              return(ret);
            }
            
            if (elem.addEventListener) {
              elem.addEventListener(event, listenHandler, false);
            } else {
              elem.attachEvent("on" + event, attachHandler);
            }
          }    
          
          function submitWait(){
            for (i = 0; i < inputs.length; i++) {
              formElement = myForm.elements[i];
              if (formElement.type == "submit") {
                formElement.disabled = true;
              }
            }
            return false;
          }
          
          var myForm = document.getElementById("mform1");
          var inputs = document.getElementsByTagName('input');
          addEvent( myForm, 'submit', submitWait );
        </script>
      </body>
    </html>

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2009
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wow my Javascript skills sucks
    thank you, it seems to work in IE, firefox and chrome.

  4. #4
    SitePoint Member
    Join Date
    Jun 2013
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi,

    I rewrote your function to disable the submit buttons.
    This will work in all browsers.
    I added a return false; so that you can see it ta

    Hope this helps you.

    HTML Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Disable submit example</title>
      </head>
      
      <body>
        <form id="mform1" name="mform1" enctype="multipart/form-data" method="post" >
          <input type=file><br />
          Name: <input type="text" ><br />
          <input type="button" value="just a button"><br />
          <input type="submit" value="submit" >
          <input type="submit" value="submit and view">
        </form>
        
        <script>
          //Cross browser add listener
          // http://stackoverflow.com/questions/10149963/adding-event-listener-cross-browser
          function addEvent(elem, event, fn) {
            function listenHandler(e) {
              var ret = fn.apply(this, arguments);
              if (ret === false) {
                e.stopPropagation();
                e.preventDefault();
              }
              return(ret);
            }
            
            function attachHandler() {
              var ret = fn.call(elem, window.event);   
              if (ret === false) {
                window.event.returnValue = false;
                window.event.cancelBubble = true;
              }
              return(ret);
            }
            
            if (elem.addEventListener) {
              elem.addEventListener(event, listenHandler, false);
            } else {
              elem.attachEvent("on" + event, attachHandler);
            }
          }    
          
          function submitWait(){
            for (i = 0; i < inputs.length; i++) {
              formElement = myForm.elements[i];
              if (formElement.type == "submit") {
                formElement.disabled = true;
              }
            }
            return false;
          }
          
          var myForm = document.getElementById("mform1");
          var inputs = document.getElementsByTagName('input');
          addEvent( myForm, 'submit', submitWait );
        </script>
      </body>
    </html>
    As an addendum to this, if I needed to fire the form submission based on the results of the added event, where (or how) would I access that?

    'addEvent(theForm,'submit', new Function(validateClockPauseForm(theForm, c)));' I need to fire the submit (theForm.submit()) only if validateClockPauseForm returns true.

    thanks in advance

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,939
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Welcome to the forums

    If I understand you correctly, you want the form to submit (or not), based on the return value of validateClockPauseForm.

    You would do that like this:

    Code JavaScript:
    function validateClockPauseForm(){
      // Your code here
     
      if(all good){
        return true
      } else {
        return false
      }
    }
     
    var theForm = document.getElementById("myForm");
    addEvent(theForm, 'submit', validateClockPauseForm);

    HTH


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
  •