onChange=”document.form.submit()” doesn’t work

Posted on by

Have you ever used the onChange event to submit a form?

onChange="document.form1.submit();"

If you are creating a form that submits as soon as a change is made to any selection, make sure you remove the “submit” button first, or you will get a javascript error similar to:

“document.form1.submit is not a function”

This is because it is confusing the “submit” button object (name=”submit”) with the function “submit()”.

See this test for an example.
Browser treatment of this varies – I haven’t tested it thoroughly in all of them.

Also note: radio buttons don’t support the onChange event in Safari, so I have used onClick on the radio buttons.

Thanks to Webprodevelopment for the tip

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>onChange test</title>
</head>

<body>
This form has both a submit button and onChange and onClick events that call the function "submit()"
<form name="form1" method="get" action="resultPage.htm" >
<select name="select1" size="3" onChange="document.form1.submit();">
  <option value="1" selected="selected" >option 1</option>
  <option value="2">option 2</option>
  <option value="3">option 3</option>
</select><p>
  <label>
  <input type="radio" name="Radio1" value="radio1" onChange="document.form1.submit();" />
    Radio1</label>
  <br />
  <label>
  <input type="radio" name="Radio2" value="radio2" onClick="document.form1.submit();"/>
    Radio2</label>
<p><input  type="button" name="submit" value="Go" />
</form>
<hr />
This form has only the onChange and onClick events that call the function "submit()"
<form name="form2"  method="get" action="resultPage.htm">

</p>

<select name="select2" size="3" onChange="document.form2.submit();">
  <option value="1" selected="selected"  >option 1</option>
  <option value="2">option 2</option>
  <option value="3">option 3</option>
</select>
<p>
  <label >
  <input type="radio"  name="RadioGroup2" value="radio1" onClick="document.form2.submit();"/>
    Radio1</label>
  <br />
  <label>
  <input type="radio" name="RadioGroup2" value="radio2" onClick="document.form2.submit();"/>
    Radio2</label>
  <br />
  </form>
</body>
</html>