JavaScript FAQ (11)--Forms (form) __java

Ix. Forms

1. Validate the form (validating a form)

Q: How do I validate before the form data is submitted to the server?
A: To validate the form's input, you can call your validation function in the form's OnSubmit event handler. When a user submits a form, the browser first invokes the OnSubmit event handler. In fact, the form will be submitted only if the processor returns TRUE. In the following example, the OnSubmit event handler validates the user's email address. (For a simple period, if the address has no spaces, contains @, and @ Neither at the beginning nor at the end, the address is considered legal.) Note that the processor itself must contain a return statement for returning Ture or false to the browser.

Your email:

This example uses the code:

<script language= "JavaScript" >
<!--
function IsValid () {
 var email=document.form1.t1.value;
 if (Email.indexof (") ==-1 
      && 0<email.indexof (' @ ')
      && email.indexof (' @ ') +1 < Email.length
 ) return true;
 else alert (' Invalid email address! ')
 return false;
}
-->
</script>
<form name=form1 
method=post
action= "Javascript:alert" (' The form is submitted. ') ' 
Onsubmit= "return IsValid ()" >
Your Email:
<input type=text name=t1 size=20 >
<input type= Submit Value=submit>
</form>

2. Combined input field (combining input Fields)

Q: Can I get more than one value from one text field to save space on the form?

A: That's OK. For example, you can display a text input field and a selection box. Using this selection box, the user can select which type of value to enter in the text field. In fact, all input values are submitted to the server through the hidden form element. Try this example: Your name:your email address:your Country:

This form is created by the following JavaScript code:

<form name=form1 action= "" onsubmit= "Return Validate ()" > <input name= "name" Type=hidden value= "" > <input Name= "Email" type=hidden value= "" > <input name= "Country" Type=hidden value= "" > <select name=s1 onchange= "re Fill () "> <option value=" name "Selected >your Name: <option value=" Email ">your Email address: <o  Ption value= "Country" >your Country: </select> <input name=t1 type=text value= "" Size=20> <input NAME=B1 type=submit value= "enter!"
> </form> <script language= "JavaScript" > <!--isfilled=new Array (0,0,0); oldactivefield= "Name";
oldindex=0; theactivefield= "Name";
theindex=0;
Thevalue= ';
Theform=document.form1;
 function refill () {oldindex=theindex;
 Theindex=theform.s1.selectedindex; 
 Oldactivefield=theactivefield;
 Theactivefield=theform.s1.options[theindex].value;
 Thevalue=theform.t1.value; Eval (' theform. ')
 +oldactivefield+ '. Value=thevalue '); Eval (' Theform.t1.value=theform. ') +theaCtivefield+ '. value ');
 if (thevalue!= ') isfilled[oldindex]=1;
if (thevalue== ') isfilled[oldindex]=0;
 function Read () {oldindex=theform.s1.selectedindex;
 Oldactivefield=theform.s1.options[oldindex].value;
 Thevalue=theform.t1.value; Eval (' theform. ')
 +oldactivefield+ '. Value=thevalue '); 
 if (thevalue!= ') isfilled[theindex]=1; 
if (thevalue== ') isfilled[theindex]=0;
 function validate () {read ();
   for (var k=0; k<isfilled.length; k++) {if (!isfilled[k)) {theindex=k;
   Theform.s1.selectedindex=k;
   Theform.t1.value= ';
   Theactivefield=theform.s1.options[k].value;
  if (oldindex==k) alert (' Please fill in your ' +theactivefield) return false; Alert (' You are submitting the following data: ' + '/nname: ' +theform.name.value + '/nemail: ' +THEFORM.EMAIL.V
 Alue + '/ncountry: ' +theform.country.value ' return false; Instead of returning false in all cases,//a real-life code here would validate the data//and return TRUE if the User submitted VAlid Data}//--> </script>
 

3. The ENTER key will work. (Would the Enter key work?)

Q: Will my form be submitted when the user presses the ENTER key?

a: In most browsing, if your form has only one text entry field, pressing the ENTER key submits the form. (The form may also contain other input elements, such as check boxes, Drop-down selection boxes, radio buttons, password input fields, hidden fields, and so on.) ）

4. Make radio button not optional (disabling a Radio button)

Q: How do I make one radio button unavailable (even if it is not optional) in a form?

A: To make a radio button optional, you can use the OnClick event handler in the input tag of the button, as follows:

<input type= "Radio" name= "MyButton" value= "Thevalue" onclick=
;
Alert (' Sorry, this option are not available! ') " >

In the following example, the "Courier delivery" option is not available. Try--you'll get a warning box: Sorry, this option is not available! Delivery method (choose one):
Download
Regular mail
Courier Delivery