Passing Forms to Functions | Inside JavaScript

Although you can access data in a form if you know the form's name (like this: document.form1.button1.value ), what if you have multiple forms in a web page you want to work with? How do you know what form a control called your script from? To let your scripts know which form a control is in when an event occurs in that control, you can pass the control's form to the event handler using the control's form property like this: this.form . And if you're using an event of the form itself, such as onsubmit , you can just use the form's this property to refer to itself.

Here's an example. In this case, I have two forms in a web page, form1 and form2 , to let the user enter her name and age. I connect both forms' onsubmit event to the same function, checkData , and I pass the form's this property to that function like this:

 <HTML>      <HEAD>          <TITLE>CGI Example</TITLE>          <SCRIPT LANGUAGE="JavaScript">              <!--  function checkData(form)   {   .   .   .   }  // -->          </SCRIPT>      </HEAD>      <BODY>  <FORM ID="form1" METHOD="POST"   ACTION="http://www.starpowder.com/steve/12-03.cgi"   ONSUBMIT="return checkData(this)">  Please enter your name:              <INPUT TYPE="TEXT" ID="text1" VALUE="">              <BR>              <INPUT TYPE="SUBMIT" NAME="Submit" VALUE="Submit">              <INPUT TYPE="RESET">          </FORM>          <BR>  <FORM ID="form2" METHOD="POST"   ACTION="http://www.starpowder.com/steve/12-03.cgi"   ONSUBMIT="return checkData(this)">  Please enter your age:              <INPUT TYPE="TEXT" ID="text1" VALUE="">              <BR>              <INPUT TYPE="SUBMIT" NAME="Submit" VALUE="Submit">              <INPUT TYPE="RESET">          </FORM>      </BODY>  </HTML>

Now I can tell for which form the onsubmit event occurred by checking the id property of the form passed to the code like this (if you're using Netscape Navigator, you need version 6+ here):

(Listing 12-08.html on the web site)

 <HTML>      <HEAD>          <TITLE>CGI Example</TITLE>          <SCRIPT LANGUAGE="JavaScript">              <!--             function checkData(form)              {  if(form.text1.value == ""){   if(form.id == "form1"){   window.alert("Please enter your name.")   return false   }   if(form.id == "form2") {   window.alert("Pleae enter your age.")   return false   }   } else {   return true   }  }              // -->          </SCRIPT>      </HEAD>      <BODY>          <FORM ID="form1" METHOD="POST"              ACTION="http://www.starpowder.com/steve/12-03.cgi"              ONSUBMIT="return checkData(this)">              Please enter your name:              <INPUT TYPE="TEXT" ID="text1" VALUE="">              <BR>              <INPUT TYPE="SUBMIT" NAME="Submit" VALUE="Submit">              <INPUT TYPE="RESET">          </FORM>          <BR>          <FORM ID="form2" METHOD="POST"              ACTION="http://www.starpowder.com/steve/12-03.cgi"              ONSUBMIT="return checkData(this)">              Please enter your age:              <INPUT TYPE="TEXT" ID="text1" VALUE="">              <BR>              <INPUT TYPE="SUBMIT" NAME="Submit" VALUE="Submit">              <INPUT TYPE="RESET">          </FORM>      </BODY>  </HTML>

That's it for forms for the moment. Let's turn to HTML buttons next .