Adding an onsubmit to a form using addEventListener/attachEvent

JavaScript
1

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:

<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:


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

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.

<!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

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

4

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

Hi there,

Welcome to the forums :slight_smile:

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:


function validateClockPauseForm(){
  // Your code here

  if(all good){
    return true
  } else {
    return false
  }
}

var theForm = document.getElementById("myForm");
addEvent(theForm, 'submit', validateClockPauseForm);

HTH