Monday, March 2, 2009

How to creata a form using javascript and submit it..

var myForm = document.createElement("form");
myForm.method="post" ;
myForm.action = "./Actionpath";
var myInput = document.createElement("input") ;
myInput.setAttribute("type","hidden");
myInput.setAttribute("name", "imput name") ;
myInput.setAttribute("value", input value);
myForm.appendChild(myInput) ;
document.body.appendChild(myForm) ;
myForm.submit() ;
document.body.removeChild(myForm) ;


o ok, I’ve run into this problem in the past where I’m using an onclick event to submit a form from a button control. When you click the button you get a nice little Javascript error stating:

“this.form.submit is not a function”

Bugger…wtf?

This only seems to happen when you have a form element named “submit” already on your page, so the browser treats that “submit” element as an object which is of course NOT a function.

I seem to run into this when I want 2 ways of submitting the form as follows:

  1. <form>
  2. ...
  3. <input type="submit" name="submit" id="submit" value="Submit Me" />
  4. <input type="button" name="submit2" id="submit2" value="Save Me" onclick="this.form.submit();" />
  5. form>

Note the name of the submit button is “submit”, hence causing an error :(

Make sure you don’t name your submit button as “submit” when you want to have multiples submits:

  1. <form>
  2. ...
  3. <input type="submit" name="btnSubmit" id="btnSubmit" value="Submit Me" />
  4. <input type="button" name="btnSave" id="btnSave" value="Save Me" onclick="this.form.submit();" />
  5. form>