Question

Form Processing HTML

One of the most ubiquitous uses of JavaScript is validating form data on the client side before it is submitted to the server. It is done everywhere because it is fast and it gives you a great deal of flexibility in how you handle errors insofar as the GUI is concerned.

Attached is an image of some code I wrote (so Blackboard can't mess it up). Some things to notice that will help you with the lab.

When you write the input fields, you want to put in an id and a name attribute. JavaScript likes to work with ids. But PHP wants get the data you submit to the server using the name attribute. To save yourself some confusion, make these the same.

Each field has a label associated with it. You want to turn that label red if there is a problem. To do this, you can put some CSS at the beginning of your head section. Write two classes, one for redtext and one for blacktext. Then if there is an error, switch the label's class to the redtext class. This is why we put an id field on the label, so we can get a hold of it and manipulate the class.

At the top of the form you can put some h2 tags and between them put a span tag with an id. Then use that id to get a hold of that area and change the innerHTML to the error message if they leave a field blank.

Input fields have an attribute called disabled. You can set that via JavaScript. If the marital status field has the value Married, then the Spouse Name field needs the disabled attribute set to false, i.e. it needs to be active so it should NOT be disabled.

You will need to get the values for password and password2 and compare them. If they are not equal, change the label class to redtext and display the error message

Use a table to align and organize your fields.

You are going to submit the form to a PHP script I wrote that will display the entered values. Submit the form to the URL given below. If you name the fields correctly all the data should be displayed on the resultant page.
[form action="http://www.waynedog.net/formreader.php” method=”post” ]

Write an event handler to validate the fields when the SUBMIT button is clicked.

If all the fields are complete, submit the form to the URL above.

All fields are required. If a field is not filled in, do not submit the data, instead set the field's label to red and at the top of the form put a message in red that says:
“Please correct the following errors:”

If the two password fields do not match, set the label to red and display the error message.

Write an event handler for the RESET button to clear and reset all values on the form.

In the onload function set the focus to the first name field.

The Marital Status field - Options for the Select are: Single Married

Write an event handler for onchange that disables the Spouse Name field if they pick Single. The Spouse Name should be active if they pick Married.

Include these lines at the beginning of your JavaScript and use the $ function to get the elements by id.

"use strict";
var $ = function(id) { return document.getElementById(id); };

NOTE: In the book they have an example of an HTML form and they use the Node interface. For this assignment use the DOM interface and the DOC HTML Specification.

Below is the label, the type of input, and the name and id to give the field. You will want to use the id in your JavaScript. The name is required for the PHP processing script I wrote that you use for the submit.

To save you some typing I have attached a file with the states listed in the format you need for the select option.

Registration Form Format is: Label - type - name/id

First Name - text - fname	Last Name - text - lname
Address - text - address1	Suite or Apt. - text - address2
City - text - city	State - select - state
ZIP Code - text - zipcode
Gender - radio button - gender	Birthdate - date - dob
Marital Status - drop down - mstatus	Spouse Name - text - sname
Email - email - email	Phone - text - phone
Password - password - password	Confirm Password - password - password2
RESET button	SUBMIT button

For example, based on this, your code for the first name field should look like this:

[label id="fnameLabel"]First name[/label][input type="text" id="fname" name="fname"]

Here is some pseudo-code that lays out how to approach lab 4, I have also included some JavaScript code in some places to give you an idea of how to approach that section.

onload section {

set up event for maritalStatus drop down
$('mstatus').onchange = mstatusChange;

set up event for Submit button
$('submit').onclick = processForm;

set focus to fname field

}

function mstatusChange() {

get the value from mstatus drop down

disable or enable spouse name based on value

if (mstatus == 'Married')
$('sname')..disabled = false;
else
$('sname')..disabled = true;

function processForm() {

get all the form values

var lname = $('lname').value;
var fname = $('fname').value;
repeat for each field on form

Set a flag saying everything entered is correct
var formGood = true;

Check the fields on the form
if a field fails, then
set the formGood flag to false
set the class for the label to red
else
set the class for the label to black (just n case it had been set to red earlier)

if (lname == "") {
  formGood = false;
$('lnameLabel').className = 'redtext';
} else {
$('lnameLabel').className = 'blacktext';
}

check that the passwords are the same

if (password != password2) {
  formGood = false;
$(passwordLabel).className = 'redtext';
set the password2 label red also
} else {
set the label classes to blacktext
}

if formGood is still true then
submit the form
else
display error message

if (formGood) {
$("myForm").submit();
} else {
$('errorMsg').innerHTML = "Please fix the errors below";
}

}

------

The code above assumes a few things you need in the HTML

In the head you will need to define the CSS classes used for the label colors. Nothing fancy

<style>
.blacktext { color: black; }
.redtext { color: red; }
</style>

Also at the top of the HTML you need a place for the error message with an ID you can get a hold of. Might as well make it red while we are at it since we have the class already.

[h2 id='errorMsg' class='redtext'][/h2]

Finally in the form tag we need to include an ID that we can use when we submit the form.

form id="myForm" action="http://www.waynedog.net/formreader.php" method="post"

Attached Files

state-select-options.txt

 <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
  <option value="AR">Arkansas</option>
  <option value="CA">California</option>
  <option value="CO">Colorado</option>
  <option value="CT">Connecticut</option>
  <option value="DE">Delaware</option>
  <option value="DC">Dist of Columbia</option>
  <option value="FL">Florida</option>
  <option value="GA">Georgia</option>
  <option value="HI">Hawaii</option>
  <option value="ID">Idaho</option>
  <option value="IL">Illinois</option>
  <option value="IN">Indiana</option>
  <option value="IA">Iowa</option>
  <option value="KS">Kansas</option>
  <option value="KY">Kentucky</option>
  <option value="LA">Louisiana</option>
  <option value="ME">Maine</option>
  <option value="MD">Maryland</option>
  <option value="MA">Massachusetts</option>
  <option value="MI">Michigan</option>
  <option value="MN">Minnesota</option>
  <option value="MS">Mississippi</option>
  <option value="MO">Missouri</option>
  <option value="MT">Montana</option>
  <option value="NE">Nebraska</option>
  <option value="NV">Nevada</option>
  <option value="NH">New Hampshire</option>
  <option value="NJ">New Jersey</option>
  <option value="NM">New Mexico</option>
  <option value="NY">New York</option>
  <option value="NC">North Carolina</option>
  <option value="ND">North Dakota</option>
  <option value="OH">Ohio</option>
  <option value="OK">Oklahoma</option>
  <option value="OR">Oregon</option>
  <option value="PA">Pennsylvania</option>
  <option value="RI">Rhode Island</option>
  <option value="SC">South Carolina</option>
  <option value="SD">South Dakota</option>
  <option value="TN">Tennessee</option>
  <option value="TX">Texas</option>
  <option value="UT">Utah</option>
  <option value="VT">Vermont</option>
  <option value="VA">Virginia</option>
  <option value="WA">Washington</option>
  <option value="WV">West Virginia</option>
  <option value="WI">Wisconsin</option>
  <option value="WY">Wyoming</option>

png file

<head> <style> .blacktext { color:black; } .redtext {color:red; } </style> <script> if (see if value of mstatus=="Married") { $("sname").disabled = false; } else { $("sname").disabled = true; } </script> </head> <body> <h2><span id="errorMesg"> </span></h2> <label id="fnameLabel" class="blacktext"><input type="text" id="fname" name="fname"></label> <label id="sname" class="blacktext"><input type="text" id="sname" name="sname" disabled></label> </body>

Answer 1

Working code implemented in HTML & JS and appropriate comments provided for better understanding:

Source code for index.html:

<html>
<head>
<title>Lab</title>
<style>
.blacktext {color:black;}
.redtext {color:red;}
</style>
   <script type="text/javascript">
//set focus to first name box on load
window.onload = function() {
document.getElementById('fname').focus
           //event for maritialStatus drop down
           $('mstatus').onchange=mstatusChange;
       };
       function $(id) {
       return document.getElementById(id);
       }
//event for submit button
//$('submit').onclick=processForm;

function mstatusChange() {
       var mstatus = $('mstatus').value;
if(mstatus=='Married')
$('sname').disabled=false;
else
$('sname').disabled=true;
}
  
      
function processForm() {
       //alert("HEY");
      
var lname=$('lname').value;
var fname=$('fname').value;
var address1=$('address1').value;
var address2=$('address2').value;
var city=$('city').value;
var zipcode=$('zipcode').value;
var state=$('state').value;
var gender=$('gender').value;
var dob=$('dob').value;
var mstatus=$('mstatus').value;
var sname=$('sname').value;
var email=$('email').value;
var phone=$('phone').value;
var password=$('password').value;
var password2=$('password2').value;

var formGood=true;
if(fname=="") {
formGood=false;
$('fnameLabel').className='redtext';
} else {
$('fnameLabel').className='blacktext';
}

if(lname=="") {
formGood=false;
$('lnameLabel').className='redtext';
} else {
$('lnameLabel').className='blacktext';
}

if(address1=="") {
formGood=false;
$('address1Label').className='redtext';
} else {
$('address1Label').className='blacktext';
}

if(city=="") {
formGood=false;
$('cityLabel').className='redtext';
} else {
$('cityLabel').className='blacktext';
}

if(state=="") {
formGood=false;
$('stateLabel').className='redtext';
} else {
$('stateLabel').className='blacktext';
}

if(zipcode=="") {
formGood=false;
$('zipcodeLabel').className='redtext';
} else {
$('zipcodeLabel').className='blacktext';
}

if(dob=="") {
formGood=false;
$('dobLabel').className='redtext';
} else {
$('dobLabel').className='blacktext';
}

if(mstatus=="") {
formGood=false;
$('mstatusLabel').className='redtext';
} else {
$('mstatusLabel').className='blacktext';
}

if(email=="") {
formGood=false;
$('emailLabel').className='redtext';
} else {
$('emailLabel').className='blacktext';
}

if(phone=="") {
formGood=false;
$('phoneLabel').className='redtext';
} else {
$('phoneLabel').className='blacktext';
}

if(password=="") {
formGood=false;
$('passwordLabel').className='redtext';
} else {
$('passwordLabel').className='blacktext';
}

if(password2=="") {
formGood=false;
$('password2Label').className='redtext';
} else {
$('password2Label').className='blacktext';
}

if(password!=password2) {
formGood=false;
$('passwordLabel').className='redtext';
} else {
$('passwordLabel').className='blacktext';
}

if(formGood) {
           alert("SUBMIT");
$("myForm").submit();
} else {
                       alert("NO SUBMIT");

$('errorMsg').innerHTML="Please fix the errors below";
}
}
   </script>
</head>
<body>
   <main>
<h2 id='errorMsg' class='redtext'></h2>

<h2>Registration Form</h2>

<form id="myForm" action="#ReplaceYourURL" method="post">
<!---<form id="myForm">--->
       <table>
<tr>
<td><label id="fnameLabel">First Name:</label><input type="text" id="fname" name="fname"></td>
       <td><label id="lnameLabel">Last Name:</label><input type="text" id="lname" name="lname"></td>
</tr>
<tr>
<td><label id="address1Label">Address:</label><input type="text" id="address1" name="address1"></td>
       <td><label id="address2Label">Suite or Apt.:</label><input type="text" id="address2" name="address2"></td>
</tr>
<tr>
<td><label id="cityLabel">City:</label><input type="text" id="city" name="city"></td>
<td><label id="stateLabel">State:</label>
<select id="state" name="state">
<option>Please select</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">Dist of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select></td>
</tr>
<tr>
<td><label id="zipcodeLabel">Zip Code:</label><input type="text" id="zipcode" name="zipcode"></td>
</tr>
<tr>
<td>
<input type="radio" id="genderLabel" class="blacktext" name="gender">
<label id="gender">Male</label><br>
<input type="radio" id="genderLabel" class="blacktext" name="gender">
<label id="gender">Female</label><br>
<input type="radio" id="genderLabel" class="blacktext" name="gender">
<label id="gender">Other</label>
</td>
<td><label id="dobLabel">Birthdate:</label><input type="date" id="dob" name="dob"></td>
</tr>
<tr>
<td>
<label id="mstatusLabel" for="mstatusLabel">Marital Status:</label>
<select id="mstatus"name="mstatus">
<option>Please select</option>
<option value="single">Single</option>
<option value="Married">Married</option>
</select>
</td>
<td><label id="snameLabel">Spouse Name:</label><input type="text" id="sname" name="sname"></td>
</tr>
<tr>
<td><label id="emailLabel">Email:</label><input type="email" id="email" name="email"></td>
       <td><label id="phoneLabel">Phone:</label><input type="text" id="phone" name="phone"></td>
</tr>
<tr>
<td><label id="passwordLabel">Password:</label><input type="password" id="password" name="password"></td>
       <td><label id="password2Label">Confirm Password:</label><input type="password" id="password2" name="password2"></td>
</tr>
<tr>
<td><input type="button" value="Submit" onclick="processForm()"></td>
<td><input type="button" value="Reset" onClick="this.form.reset()"></td>
</tr>
</table>
</form>

<h2></h2>
   </main>
</body>
</html>

Output Screenshots:

Lab X + 0 File A:/CheggS/58/index.html Please fix the errors below Registration Form Last Name: Smith Suite or Apt.: Building State: New York First Name: John Address: Park Avenue City: LA Zip Code: 911911 Male Female Other Marital Status: Single Email: [email protected] Password: Submit n Birthdate: 28 - 09 - 1989 Spouse Name: Phone: 9919919919 Confirm Password: Reset

Hope it helps, if you like the answer give it a thumbs up. Thank you.