The main content of the page will be a form, containing the elements listed below. For...

The main content of the page will be a form, containing the elements listed below.
For each element of the form (except the <form> itself and any <button>s), there should be some text preceding the element explaining what the user should enter or select in that element.
The form should use the POST method, and the action should be the same php file, so the same php file that generated the form also validates the form.
The form should have at least four text input elements (input type="text"). Two of these input fields should ask the user to enter the same value (for example, "Enter your e-mail" and "Enter your e-mail again").
There should be one form element that is for password input (input type="password”)
There should be two sets of radio buttons, with at least 3 radio buttons for each set (input type="radio”). Hint: Radio buttons belong to the same set if they have the same name attribute.
There should be some checkboxes (input type="checkbox”)
The form should have a drop-down list (select). This list should have at least 5 options, with one option being set as the default.
The form should have a multi-line input field (textarea)
There should be one button, an input element with type="button”. This button should call the javascript function checkSimilarity().
There should be one button, using the button element. Note that the previous button uses the tag <input type="button"...>, while this button uses the tag <button …>. This button should call the javascript function validate().
The form should have a submit button (input element with type="submit”)

Javascript Requirements

Create a function called checkSimilarity(), which checks to see if the text entered in the two text entry elements that should have identical values are indeed identical. If they are the same, display an alert box saying “The inputs are the same”, and if not, display “The inputs are not the same”.
Create a function called validate(), which checks if
- Text has been entered in every text box
- At least one radio button has been selected for each set
- At least one checkbox has been checked

Display an alert box stating which field has not been completed

Solutions

Expert Solution

Download Source Code: https://www.roseindia.net/tutorialfiles/48739.studentregistrationformexample.zip

StudentRegistration.html

<html>
<head>
<script type="text/javascript" src="validate.js"></script>
</head>
<body>
<form action="#" name="StudentRegistration" onsubmit="return(validate());">

<table cellpadding="2" width="20%" bgcolor="99FFFF" align="center"
cellspacing="2">

<tr>
<td colspan=2>
<center><font size=4><b>Student Registration Form</b></font></center>
</td>
</tr>

<tr>
<td>Name</td>
<td><input type=text name=textnames id="textname" size="30"></td>
</tr>

<tr>
<td>Father Name</td>
<td><input type="text" name="fathername" id="fathername"
size="30"></td>
</tr>
<tr>
<td>Postal Address</td>
<td><input type="text" name="paddress" id="paddress" size="30"></td>
</tr>

<tr>
<td>Personal Address</td>
<td><input type="text" name="personaladdress"
id="personaladdress" size="30"></td>
</tr>

<tr>
<td>Sex</td>
<td><input type="radio" name="sex" value="male" size="10">Male
<input type="radio" name="sex" value="Female" size="10">Female</td>
</tr>

<tr>
<td>City</td>
<td><select name="City">
<option value="-1" selected>select..</option>
<option value="New Delhi">NEW DELHI</option>
<option value="Mumbai">MUMBAI</option>
<option value="Goa">GOA</option>
<option value="Patna">PATNA</option>
</select></td>
</tr>

<tr>
<td>Course</td>
<td><select name="Course">
<option value="-1" selected>select..</option>
<option value="B.Tech">B.TECH</option>
<option value="MCA">MCA</option>
<option value="MBA">MBA</option>
<option value="BCA">BCA</option>
</select></td>
</tr>

<tr>
<td>District</td>
<td><select name="District">
<option value="-1" selected>select..</option>
<option value="Nalanda">NALANDA</option>
<option value="UP">UP</option>
<option value="Goa">GOA</option>
<option value="Patna">PATNA</option>
</select></td>

</tr>

<tr>
<td>State</td>
<td><select Name="State">
<option value="-1" selected>select..</option>
<option value="New Delhi">NEW DELHI</option>
<option value="Mumbai">MUMBAI</option>
<option value="Goa">GOA</option>
<option value="Bihar">BIHAR</option>
</select></td>
</tr>
<tr>
<td>PinCode</td>
<td><input type="text" name="pincode" id="pincode" size="30"></td>

</tr>
<tr>
<td>EmailId</td>
<td><input type="text" name="emailid" id="emailid" size="30"></td>
</tr>

<tr>
<td>DOB</td>
<td><input type="text" name="dob" id="dob" size="30"></td>
</tr>

<tr>
<td>MobileNo</td>
<td><input type="text" name="mobileno" id="mobileno" size="30"></td>
</tr>
<tr>
<td><input type="reset"></td>
<td colspan="2"><input type="submit" value="Submit Form" /></td>
</tr>
</table>
</form>
</body>
</html>

Form Validation

function validate()
{ 
   if( document.StudentRegistration.textnames.value == "" )
   {
     alert( "Please provide your Name!" );
     document.StudentRegistration.textnames.focus() ;
     return false;
   }
   if( document.StudentRegistration.fathername.value == "" )
   {
     alert( "Please provide your Father Name!" );
     document.StudentRegistration.fathername.focus() ;
     return false;
   }
   
   if( document.StudentRegistration.paddress.value == "" )
   {
     alert( "Please provide your Postal Address!" );
     document.StudentRegistration.paddress.focus() ;
     return false;
   }
   if( document.StudentRegistration.personaladdress.value == "" )
   {
     alert( "Please provide your Personal Address!" );
     document.StudentRegistration.personaladdress.focus() ;
     return false;
   }
   if ( ( StudentRegistration.sex[0].checked == false ) && ( StudentRegistration.sex[1].checked == false ) )
   {
   alert ( "Please choose your Gender: Male or Female" );
   return false;
   }   
   if( document.StudentRegistration.City.value == "-1" )
   {
     alert( "Please provide your City!" );
     document.StudentRegistration.City.focus() ;
     return false;
   }   
   if( document.StudentRegistration.Course.value == "-1" )
   {
     alert( "Please provide your Course!" );
    
     return false;
   }   
   if( document.StudentRegistration.District.value == "-1" )
   {
     alert( "Please provide your Select District!" );
    
     return false;
   }   
   if( document.StudentRegistration.State.value == "-1" )
   {
     alert( "Please provide your Select State!" );
     
     return false;
   }
   if( document.StudentRegistration.pincode.value == "" ||
           isNaN( document.StudentRegistration.pincode.value) ||
           document.StudentRegistration.pincode.value.length != 6 )
   {
     alert( "Please provide a pincode in the format ######." );
     document.StudentRegistration.pincode.focus() ;
     return false;
   }
 var email = document.StudentRegistration.emailid.value;
  atpos = email.indexOf("@");
  dotpos = email.lastIndexOf(".");
 if (email == "" || atpos < 1 || ( dotpos - atpos < 2 )) 
 {
     alert("Please enter correct email ID")
     document.StudentRegistration.emailid.focus() ;
     return false;
 }
  if( document.StudentRegistration.dob.value == "" )
   {
     alert( "Please provide your DOB!" );
     document.StudentRegistration.dob.focus() ;
     return false;
   }
  if( document.StudentRegistration.mobileno.value == "" ||
           isNaN( document.StudentRegistration.mobileno.value) ||
           document.StudentRegistration.mobileno.value.length != 10 )
   {
     alert( "Please provide a Mobile No in the format 123." );
     document.StudentRegistration.mobileno.focus() ;
     return false;
   }
   return( true );
}

OUTPUT

venereology answered 1 year ago

Next > < Previous

Question

The main content of the page will be a form, containing the elements listed below. For...

Solutions

Expert Solution

Related Solutions

Listed below is the sodium content in milligrams (mg) for 5 of Wendy’s burgers. This data...

Which form of the compound below will predominate at the pH's listed below: CH3COOH (pKa =...

For each pair of elements and compounds listed below, discuss their similarities and/or differences in terms...

Listed below are items that may or may not require the filing of an SEC form....

GENERAL INSTRUCTIONS FOR JANUARY 1) Journalize the transactions listed below and on the next page and...

Decide whether each pair of elements in the table below will form an ionic compound.

Decide whether each pair of elements in the table below will form an ionic compound. If...

Decide whether each pair of elements in the table below will form an ionic compound.

Kindly write a one page summary of the content below including important details. Thank you. Abstract...

Kindly write a two page summary of the content below including important details. Thank you. kindly...