Submitting Forms


Although you can use JavaScript with controls in a form in the browser and create working, complete programs, forms were originally created to let you send data back to the server. I'll take a look at an example showing how this works here.

In this case, I'll let the user send his name back to a Perl CGI script. (Perl, which stands for Practical Extraction and Reporting Language , is one of the popular programming languages for server-side CGI programming, and we'll see more about it in Chapter 24.) Many CGI options are available, such as using Microsoft's .NET framework on the server, or even using server-side JavaScript. That CGI script will create a new web page displaying the user's name and send that web page back to the browser. To make this work, I set the form's METHOD attribute to "POST" and ACTION attribute to the URL of the script (this is a fictitious URL):

(Listing 12-02.html on the web site)
 <HTML>      <HEAD>          <TITLE>CGI Example</TITLE>      </HEAD> 
 <BODY>          <H1>Sending Data to the Server</H1>  <FORM METHOD="POST" ACTION="http://www.starpowder.com/12-03.cgi">  Please enter your name:              <INPUT TYPE="text" NAME="text" VALUE="">              <BR>  <INPUT TYPE="SUBMIT" NAME="Submit" VALUE="Submit">   <INPUT TYPE="RESET">  </FORM>      </BODY>  </HTML> 

Note also that I've included a submit ( <INPUT TYPE="SUMIT"> ) and reset ( <INPUT TYPE="RESET"> ) button. The user can click the submit button in the form to send the data in the formthat is, the user's name in the text fieldback to the server, and click the reset button to reset all data in the form's controls to its default value. Here's what the Perl CGI script, 12-03.cgi, on the server looks like (more on how Perl scripts like this one work and how to write them in Chapter 24):

(Listing 12-03.html on the web site)
 #!/usr/local/bin/perl  use CGI;  $co = new CGI;  print $co->header,  $co->start_html(      -title=>'CGI Example',      -author=>'Steve',      -meta=>{'keywords'=>'CGI Perl'},  ),  $co->hr;  if ($co->param()) {      print          "Your name is: ",$co->em($co->param('text')), ".";  }  print $co->hr;  print $co->end_html; 

The user can now enter a name in the text field in our web page, as you see in Figure 12.1.

Figure 12.1. Entering data into a form.

graphics/12fig01.gif

When the user clicks the submit button in our web page, the data in the form, including the text in the text field, is sent to the URL I've specified in the ACTION attribute, which is the URL of our CGI script, 12-03.cgi. That CGI script processes the data we've sent it and returns the web page you see in Figure 12.2.

Figure 12.2. Getting a web page back from a server-side script.

graphics/12fig02.gif

So where does JavaScript come in when you're submitting data back to the server? There's plenty of ways that JavaScript can be involved. For example, you can use JavaScript to check the user's data before sending it back to the server, and that's a frequent use of JavaScript.

You can check form data before it's sent back to the server by handling the form's onsubmit event, which occurs when the user clicks the submit button. If you return true from this events handler, the data is submitted to the server; and if you return false, the data is not submitted (and the browser just keeps displaying the same page).

Here's an example; in this case, I'll check whether the user has entered any text into the text field that is supposed to hold their name before sending that data back to the server. I start by connecting a JavaScript function named checkData to the ONSUBMIT attribute of the form like thisnote that because the browser needs to use the return value from this function, I assign the text "return checkData()" to the ONSUBMIT attribute, not just "checkData()" :

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

Now I just check whether the user has entered any data, prompt the user if she has not, and send the data on to the server or not, as appropriate:

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

You can see how this works in Figure 12.3, where the code is prompting me to enter a name. Checking user data like this before sending it back to the server can save you valuable server time on worthless dataand save the user time waiting for server round trips.

Figure 12.3. Using JavaScript to check form data.

graphics/12fig03.gif

Besides using ONSUBMIT , you also can use ONRESET to warn users that if they click the reset button, they'll be erasing all the form's data. That might look like this:

(Listing 12-05.html on the web site)
 <HTML>      <HEAD>          <TITLE>CGI Example</TITLE>          <SCRIPT LANGUAGE="JavaScript">              <!--             function checkData()              {                  if(document.form1.text1.value == ""){                      window.alert("Please enter your name.")                      return false                  } else {                      return true                  }              }  function checkReset()   {   if(window.confirm("Erase all data and reset to defaults?")){   return true   } else {   return false   }   }  // -->          </SCRIPT>      </HEAD>      <BODY>  <FORM NAME="form1" METHOD="POST"   ACTION="http://www.starpowder.com/steve/12-03.cgi"   ONSUBMIT="return checkData()" ONRESET="return checkReset()">  Please enter your name:              <INPUT TYPE="TEXT" ID="text1" VALUE="">              <BR>              <INPUT TYPE="SUBMIT" NAME="Submit" VALUE="Submit">              <INPUT TYPE="RESET">          </FORM>      </BODY>  </HTML> 


Inside Javascript
Inside JavaScript
ISBN: 0735712859
EAN: 2147483647
Year: 2005
Pages: 492
Authors: Steve Holzner

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net