I need help with my Javascript homework. Part 1 . Click HERE to display a Web pa

ID: 3677357 • Letter: I

Question

I need help with my Javascript homework.

Part 1. Click HERE to display a Web page containing a registration form. Once displayed, view source and save the file to your computer. This exercise is to modify the page as described below.

When form is loaded, place the registration fee of 125 dollars in the regFee textbox, calculate the grand total due, and store the amount in the grandTotal textbox. Hint - create a separate function for calculating and displaying the grand total.

When the user selects or deselects the optional items, calculate the total of all the optional items, store the total in the options textbox, and recalculate and display the grand total.

When the user changes the number attending the banquet, calculate the total banguet fee, display the amount, and recalculate and display the grand total.

When the user clicks the Register button, verify that the required fields have been completed. The form should only be submitted when the required fields meet the following criteria:

First name, Last name, Street, and City may not be blank

A State must be chosen

A 5 digit zip code must be entered (Optional - the 5 digit or 9 digit form may be used)

The email address must contain an "@" sign (Optional - locate and apply a Regular Expression for validating the format of an email address)

The phone number must be entered using exactly 3 digits for the area code, 3 digit prefix, and a 4 digit exchange

Note: the dollar amount textboxes have been disabled. This prevents the user from modifying the data in these boxes. JavaScript however, can still be used to modify the textboxes.

Part 2. Add cookies to the page. Cookies should be created for the following fields: first name, last name, street, city, state, zip, email, and phone number fields. Persistent cookie should be created which are valid for 1 year. When the user returns to the page, cookies should be read and the individual form field values restored to the saved cookie values.

The function which restores the cookie value should be called when the page is loaded. Begin by placing a simple alert statement in the function.
function readCookies()
{ alert(document.cookie);
}

<html>
<head>
<title>Registration Form</title>

var newRegFee = 125.00;

function regFee() {
document.getElementById("regFee").value = newRegFee;
}

function option() {
var> var two = document.getElementsByName("opt2")[0];

if (two.checked==true && one.checked==true) {
var> var twoValue = two.value;
var option = +twoValue + +oneValue;

document.getElementById("options").value = option;
}

else if(two.checked==true){
document.getElementById("options").value = two.value ;
}

else if (one.checked==true) {
document.getElementById("options").value = one.value ;
}
}

function attending() {
attendingIndex = document.getElementById("guests").selectedIndex;

if(attendingIndex==0){
document.getElementById("banq").value = 0;
}

else {
document.getElementById("banq").value = attendingIndex * 30;
}

}

//var theBanqValue = document.getElementById("banq");
//var grandTotalValue = document.getElementById("grandTotal");
//var regFeeValue = document.getElementById("regFee");
v//ar optionValue = document.getElementById("options");

function grandTotal() {
document.getElementById("grandTotal").value = newRegFee
alert(document.getElementById("options").value);
// grandTotalValue.value = optionValue.value + regFeeValue.value + theBanqValue.value;

}

window.onload = function start() {
regFee();
grandTotal()
}

</script>

table {font-size: 8pt; width: 510px; padding: 10px;
border-bottom: 2px solid rgb(83,183,51)}

#lname, #fname, #city, #email, #memberid {width: 198px}
#street {width: 432px}
#zip {width: 88px}
#regFee, #banq, #options, #grandTotal {width: 60px}
</style>
</head>

<body>
<div id="main">
<p id="intro">15th Annual JavaScript Conference<br />
Anne Arundel Community College<br />
April 26<br />
Conference Fee: $125
</p>
<h1>Conference Registration Form</h1>

<table>
<tr>
<td><span>*</span>First Name</td>
<td><input name="fname" id="fname" /></td>
<td><span>*</span>Last</td>
<td colspan="3"><input name="lname" id="lname" /></td>
</tr>

<tr>
<td><span>*</span>Street</td>
<td colspan="5"><input type="text" id="street" name="street" /></td>
</tr>

<tr>
<td><span>*</span>City</td>
<td><input type="text" id="city" name="city" /></td>
<td><span>*</span>State</td>
<td><select id="state" name="state"><option value="" selected>Choose</option>
<option value="AK" >AK</option>
<option value="AL" >AL</option>
<option value="AR" >AR</option>
<option value="AZ" >AZ</option>
<option value="CA" >CA</option>
<option value="CO" >CO</option>

<tr>
<td><span>*</span>Phone Number</td>
<td colspan="5">
( <input id="phone1" name="phone1" size="3" /> )
<input id="phone2" name="phone2" size="3" /> -
<input id="phone3" name="phone3" size="4" />
</td>
</tr>

<tr>
<td colspan="5">Registration Fee</td>
<td>$<input type="text" id="regFee" name="regFee" disabled />
</tr>

<tr>
<td colspan="6">Optional (additional fees may apply)</td>
</tr>

<tr>
<td colspan="5">
<input type="checkbox" name="opt1" value="5"/> Breakfast ($5)
<input type="checkbox" name="opt2" value="10"/> Lunch ($10)
<input type="checkbox" name="opt3" checked value="0" /> Happy Hour (free!)
</td>
<td>$<input type="text" id="options" name="options" disabled /></td>
</tr>

<tr>
<td colspan="2">Number attending dinner banquet ($30 per person)</td>
<td> </td>
<td>
<select id="guests" name="guests">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</td>
<td> </td>
<td>$<input type="text" id="banq" name="banq" disabled /></td>
</tr>

<tr>
<td colspan="5">Grand Total Due</td>
<td>$<input type="text" id="grandTotal" name="grandTotal" disabled /></td>
</tr>
</table>

<p><span>* Required Information</span></p>
<p><input id="sbutton" type="submit" value="Register" /></p>

</form>

</div>
</body>
</html>

Explanation / Answer

<html>
<head>
<title>Registration Form</title>

function validate()
{
var flag=false;
var mailformat = /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+

$/;
if(document.getElementById('fname').value=="")
alert("First name can't be empty")
else if(document.getElementById('lname').value=="")
alert("Last name can't be empty")
else if(document.getElementById('street').value=="" )
alert("Street can't be empty")
else if(document.getElementById('city').value=="")
alert("City can't be empty")
else if(document.getElementById('state').value=="")
alert("State can't be empty")
else if(document.getElementById('zip').value=="")
alert("Zip can't be empty")
else if(isNaN(document.getElementById('zip').value))
alert("Zip code accepts only integers")
else if(document.getElementById('zip').value.length!==5)
alert("Zip codelength should be of length 5")
else if(document.getElementById('email').value=="")
alert("Email can't be empty")
else if(!document.getElementById('email').value.match

(mailformat))
alert("You have entered an invalid email address!");
else if(document.getElementById('phone1').value.length!=3)
alert("Phone1 length should be 3")
else if(document.getElementById('phone2').value.length!=3)
alert("Phone2 length should be 3")
else if(document.getElementById('phone3').value.length!=4)
alert("Phone3 length should be 4")
else
{
flag=true;
setCookie('fname',document.getElementById('fname').value);
setCookie('lname',document.getElementById('lname').value);
setCookie('street',document.getElementById('street').value);
setCookie('city',document.getElementById('city').value);
setCookie('state',document.getElementById('state').value);
setCookie('zip',document.getElementById('zip').value);
setCookie('email',document.getElementById('email').value);
setCookie('phone1',document.getElementById('phone1').value);
setCookie('phone2',document.getElementById('phone2').value);
setCookie('phone3',document.getElementById('phone3').value);
}
return flag;
}

function setCookie(cname, cvalue) {
    var d = new Date();
    d.setTime(d.getTime() + (365*24*60*60*1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}

function readCookie(name) {
alert(name);
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0)
{
alert(c);
document.getElementById(name).value=c.substring

(nameEQ.length,c.length);

}
}
return null;
}

function initialize()
{
alert('saf');
regFee();
readCookie('fname');
readCookie('lname');
readCookie('state');
readCookie('street');
readCookie('city');
readCookie('zip');
readCookie('email');
readCookie('phone1');
readCookie('phone2');
readCookie('phone3');
grandTotal();
}

function regFee() {
document.getElementById("regFee").value = newRegFee;
}

function option() {
var> var two = document.getElementsByName("opt2")[0];

if (two.checked==true && one.checked==true) {
var> var twoValue = two.value;
var option = +twoValue + +oneValue;
document.getElementById("options").value = option;

}

else if(two.checked==true){
document.getElementById("options").value = two.value ;
}

else if (one.checked==true) {
document.getElementById("options").value = one.value ;
}
grandTotal();
}

function attending() {
attendingIndex = document.getElementById

("guests").selectedIndex;

if(attendingIndex==0){
document.getElementById("banq").value = 0;
}

else {
document.getElementById("banq").value = attendingIndex *

30;
}
grandTotal();
}

//var theBanqValue = document.getElementById("banq");
//var grandTotalValue = document.getElementById

("grandTotal");
//var regFeeValue = document.getElementById("regFee");
v//ar optionValue = document.getElementById("options");

function grandTotal() {
document.getElementById("grandTotal").value = newRegFee

+document.getElementById("options").value

+document.getElementById("banq").value;

}

</script>

4;
border-top: 2px solid rgb(83,183,51); font-weight: bold}
#main p {font-size: 9pt;}
#main #intro {text-align: right; font-weight: bold}
span {color: red}

table {font-size: 8pt; width: 510px; padding: 10px;
border-bottom: 2px solid rgb(83,183,51)}

#lname, #fname, #city, #email, #memberid {width: 198px}
#street {width: 432px}
#zip {width: 88px}
#regFee, #banq, #options, #grandTotal {width: 60px}
</style>
</head>

<body>
<div id="main">
<p id="intro">15th Annual JavaScript Conference<br />
   Anne Arundel Community College<br />
   April 26<br />
   Conference Fee: $125
</p>
<h1>Conference Registration Form</h1>

<table>
<tr>
<td><span>*</span>First Name</td>
<td><input name="fname" id="fname">

('fname')/></td>
<td><span>*</span>Last</td>
<td colspan="3"><input name="lname" id="lname"

onload=readCookie('lname') /></td>
</tr>

<tr>
<td><span>*</span>Street</td>
<td colspan="5"><input type="text" id="street"

onload=readCookie('street') name="street" /></td>
</tr>

<tr>
<td><span>*</span>City</td>
<td><input type="text" id="city" name="city"

onload=readCookie('city')/></td>
<td><span>*</span>State</td>
<td><select id="state" name="state">

('state')><option value="" selected>Choose</option>
              <option value="AK" >AK</option>
              <option value="AL" >AL</option>
              <option value="AR" >AR</option>
              <option value="AZ" >AZ</option>
              <option value="CA" >CA</option>
              <option value="CO" >CO</option>

              <option value="PW" >PW</option>
              <option value="VI" >VI</option>
            </select></td>
   <td><span>*</span>Zip</td>
   <td><input type="text" id="zip" name="zip"

onload=readCookie('zip')/></td>
</tr>

<tr>
<td><span>*</span>E-mail</td>
<td colspan="5"><input name="email" id="email"

onload=readCookie('email')/></td>
</tr>

<tr>
   <td><span>*</span>Phone Number</td>
   <td colspan="5">
       ( <input id="phone1" name="phone1">

('phone1') size="3" /> )
<input id="phone2" name="phone2">

('phone2') size="3" /> -
<input id="phone3" name="phone3">

('phone3') size="4" />
</td>
</tr>

<tr>
<td colspan="5">Registration Fee</td>
<td>$<input type="text" id="regFee" name="regFee" onload

="regFee()" disabled />
</tr>

<tr>
<td colspan="6">Optional (additional fees may apply)</td>
</tr>

Breakfast ($5)
<input type="checkbox" name="opt2" value="10"/> Lunch

($10)
<input type="checkbox" name="opt3" checked value="0" />

Happy Hour (free!)
</td>
<td>$<input type="text" id="options" name="options"

disabled /></td>
</tr>

<tr>
<td colspan="2">Number attending dinner banquet ($30 per

person)</td>
   <td> </td>
   <td>
       <select id="guests" name="guests">
       <option>0</option>
       <option>1</option>
       <option>2</option>
       <option>3</option>
       <option>4</option>
       <option>5</option>
       </select>
   </td>
   <td> </td>
   <td>$<input type="text" id="banq" name="banq" disabled

/></td>
</tr>

<tr>
<td colspan="5">Grand Total Due</td>
<td>$<input type="text" id="grandTotal" name="grandTotal"

disabled /></td>
</tr>
</table>

<p><span>* Required Information</span></p>
<p><input id="sbutton" type="submit"

value="Register" /></p>

</form>

</div>
</body>
</html>

Navigate

I need help with my Java program below. Works on desktop but not on mobile devic

I need help with my Kinetics Lab. I need to determine the Rate of the Reaction (

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

I need help with my Javascript homework. Part 1 . Click HERE to display a Web pa

Question

Explanation / Answer

Related Questions

Navigate