adding an onsubmit to a form using addEventListener/attachEvent

**remonkal** · Jan 23, 2013 10:24

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;
			}
		}
	}
}

**Pullo** · Jan 23, 2013 14:32

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>

**remonkal** · Jan 24, 2013 01:56

wow my Javascript skills sucks
thank you, it seems to work in IE, firefox and chrome.

User Tag List

Thread: adding an onsubmit to a form using addEventListener/attachEvent

Thread Tools

Display

adding an onsubmit to a form using addEventListener/attachEvent

Bookmarks

Bookmarks

Posting Permissions