Academic Integrity: tutoring, explanations, and feedback — we don’t complete graded work or submit on a student’s behalf.

Javascript Please use your text editor of choice to edit orderup.html, and resul

ID: 3713330 • Letter: J

Question

Javascript

Please use your text editor of choice to edit orderup.html, and results.html.

orderup.html

For this orderup.html, you need to:

• Must verify that the password fields match.

– If the password fields match, allow the user to continue to results.html

– If the password fields do not match, create an alert saying “ensure

passwords match” and do not allow the user to continue to

results.html

• Create a new “Delivery Address” fieldset that is the exact same as billing

address but with a checkbox that says “same as billing” that will populate

with whatever is in the “Billing Address fieldset” if checkbox is clicked.

results.html

• When “Place Order” button is pressed, the screen will display all of the

fields from the previous page

Here is the code orderup.html

<!DOCTYPE html>

<head>
<link rel="stylesheet" href="orderup.css">
<title>Orderup</title>
</head>

<body>
<h1 id="headerLine">Order Up</h1>
<br>
<section>
<form id=payment action="results.html" method="get">
<fieldset>
<legend>Billing address</legend>

<label for=name>First Name</label>

<input id=name name=fname type=text placeholder="First name" required autofocus />
<br>

<label for=name>Last Name</label>

<input id=name1 name=lname type=text placeholder="Last name" required autofocus />
<br>

<label for=address>Street Address</label>

<input id=addr name=addr type=text placeholder="street address" required autofocus />
<br>

<label for=address>City</label>

<input id=city name=city type=text placeholder="city" required autofocus />
<br>

</text>

<label for=country>State</label>

<select>

<option value="AL">Alabama (AL)</option>

<option value="AK">Alaska (AK)</option>

<option value="AZ">Arizona (AZ)</option>

<option value="AR">Arkansas (AR)</option>

<option value="CA">California (CA)</option>

<option value="CO">Colorado (CO)</option>

<option value="CT">Connecticut (CT)</option>

<option value="DE">Delaware (DE)</option>

<option value="DC">District Of Columbia (DC)</option>

<option value="FL">Florida (FL)</option>

<option value="GA">Georgia (GA)</option>

<option value="HI">Hawaii (HI)</option>

<option value="ID">Idaho (ID)</option>

<option value="IL">Illinois (IL)</option>

<option value="IN">Indiana (IN)</option>

<option value="IA">Iowa (IA)</option>

<option value="KS">Kansas (KS)</option>

<option value="KY">Kentucky (KY)</option>

<option value="LA">Louisiana (LA)</option>

<option value="ME">Maine (ME)</option>

<option value="MD">Maryland (MD)</option>

<option value="MA">Massachusetts (MA)</option>

<option value="MI">Michigan (MI)</option>

<option value="MN">Minnesota (MN)</option>

<option value="MS">Mississippi (MS)</option>

<option value="MO">Missouri (MO)</option>

<option value="MT">Montana (MT)</option>

<option value="NE">Nebraska (NE)</option>

<option value="NV">Nevada (NV)</option>

<option value="NH">New Hampshire (NH)</option>

<option value="NJ">New Jersey (NJ)</option>

<option value="NM">New Mexico (NM)</option>

<option value="NY">New York (NY)</option>

<option value="NC">North Carolina (NC)</option>

<option value="ND">North Dakota (ND)</option>

<option value="OH">Ohio (OH)</option>

<option value="OK">Oklahoma (OK)</option>

<option value="OR">Oregon (OR)</option>

<option value="PA">Pennsylvania (PA)</option>

<option value="RI">Rhode Island (RI)</option>

<option value="SC">South Carolina (SC)</option>

<option value="SD">South Dakota (SD)</option>

<option value="TN">Tennessee (TN)</option>

<option value="TX">Texas (TX)</option>

<option value="UT">Utah (UT)</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>

</li>

</ol>

</fieldset>

<fieldset>

<legend>Payment</legend>

<input id=visa name=cardtype type=radio checked="checked" />

<label for=visa>VISA</label>

<input id=amex name=cardtype type=radio />

<label for=amex>Discover</label>

<input id=mastercard name=cardtype type=radio />

<label for=mastercard>Mastercard</label>

<input id=AmericanExpress name=cardtype type=radio />

<label for=AmericanExpress>AmericanExpress</label>
<br>

<label for=name>Card</label>

<input id=name name=fname type=number placeholder="card number" required autofocus />
<br>

<label for=expiredate>Expiredate</label>

<select name="month" id="month" size="1">

<option value="00">MM</option>

<option value="01">01</option>

<option value="02">02</option>

<option value="03">03</option>

<option value="04">04</option>

<option value="05">05</option>

<option value="06">06</option>

<option value="07">07</option>

<option value="08">08</option>

<option value="09">09</option>

<option value="10">10</option>

<option value="11">11</option>

<option value="12">12</option>

</select>

<select name="year" id="year" size="1">

<option value="00">YY</option>

<option value="01">2018</option>

<option value="02">2019</option>

<option value="03">2020</option>

<option value="04">2021</option>

<option value="05">2022</option>

</select>

<br>

<label for=ccv>CCV</label>

<input id="cvc" type="number" placeholder="Cvc/Cvv" maxlength="3" />

</fieldset>

<fieldset>

<legend>Create Account</legend>

<label for=name>User Name</label>

<input id=name name=fname type=text placeholder="Username" required autofocus />
<br>

<label for=name>Password</label>

<input id=name1 name=lname type=password placeholder="password" required autofocus />
<br>

<label for=address>Verify Password</label>

<input id=addr name=addr type=password placeholder="password" required autofocus />
<br>

</fieldset>

<div id="btnDiv">
<input type="submit" name="purchase" class="submitButton" value="Place Order">
<div>

</form>

</section>

</body>

</html>

results.html

<!DOCTYPE html>
<html>
<title>results</title>
<body>
<p>The form has successfully been submitted</p>
</body>
</html>

Some Screenshots of how it should be

Place an Onder ress First name Jal Last name Irani Street Address 1230 Thugs Mansion City Baltimore State MD Delivery ? Chess same as billing address First name Jal Last name Irani Street Address 1230 Thugs Mansion City Baltimore State MD

Explanation / Answer

Orderup.html

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="orderup.css">

<title>Orderup</title>

</head>

<body>

<h1 id="headerLine">Order Up</h1><br>

<section>

<form id=payment method="get" >

<fieldset>

<legend>Billing address</legend>

<label for=name>First Name</label>

<input id=billingname name=billingname type=text placeholder="First name" required autofocus /><br>

<label for=name>Last Name</label>

<input id=billingname1 name=billingname1 type=text placeholder="Last name" required autofocus /><br>

<label for=address>Street Address</label>

<input id=billingaddr name=billingaddr type=text placeholder="street address" required autofocus /><br>

<label for=address>City</label>

<input id=billingcity name=billingcity type=text placeholder="city" required autofocus /><br>

<label for=country>State</label>

<select id="billingcountry" name = "billingcountry">

<option value="AL">Alabama (AL)</option>

<option value="AK">Alaska (AK)</option>

<option value="AZ">Arizona (AZ)</option>

<option value="AR">Arkansas (AR)</option>

<option value="CA">California (CA)</option>

<option value="CO">Colorado (CO)</option>

<option value="CT">Connecticut (CT)</option>

<option value="DE">Delaware (DE)</option>

<option value="DC">District Of Columbia (DC)</option>

<option value="FL">Florida (FL)</option>

<option value="GA">Georgia (GA)</option>

<option value="HI">Hawaii (HI)</option>

<option value="ID">Idaho (ID)</option>

<option value="IL">Illinois (IL)</option>

<option value="IN">Indiana (IN)</option>

<option value="IA">Iowa (IA)</option>

<option value="KS">Kansas (KS)</option>

<option value="KY">Kentucky (KY)</option>

<option value="LA">Louisiana (LA)</option>

<option value="ME">Maine (ME)</option>

<option value="MD">Maryland (MD)</option>

<option value="MA">Massachusetts (MA)</option>

<option value="MI">Michigan (MI)</option>

<option value="MN">Minnesota (MN)</option>

<option value="MS">Mississippi (MS)</option>

<option value="MO">Missouri (MO)</option>

<option value="MT">Montana (MT)</option>

<option value="NE">Nebraska (NE)</option>

<option value="NV">Nevada (NV)</option>

<option value="NH">New Hampshire (NH)</option>

<option value="NJ">New Jersey (NJ)</option>

<option value="NM">New Mexico (NM)</option>

<option value="NY">New York (NY)</option>

<option value="NC">North Carolina (NC)</option>

<option value="ND">North Dakota (ND)</option>

<option value="OH">Ohio (OH)</option>

<option value="OK">Oklahoma (OK)</option>

<option value="OR">Oregon (OR)</option>

<option value="PA">Pennsylvania (PA)</option>

<option value="RI">Rhode Island (RI)</option>

<option value="SC">South Carolina (SC)</option>

<option value="SD">South Dakota (SD)</option>

<option value="TN">Tennessee (TN)</option>

<option value="TX">Texas (TX)</option>

<option value="UT">Utah (UT)</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>

</fieldset>

<fieldset>

<legend>Delivery address</legend>

<input id=sameasbilling name=sameasbilling type=checkbox />

<label for=sameasbilling>Same as billing Address</label><br>

<label for=name>First Name</label>

<input id=deliveryname name=deliveryname type=text placeholder="First name" required autofocus /><br>

<label for=name>Last Name</label>

<input id=deliveryname1 name=deliveryname1 type=text placeholder="Last name" required autofocus /><br>

<label for=address>Street Address</label>

<input id=deliveryaddr name=deliveryaddr type=text placeholder="street address" required autofocus /><br>

<label for=address>City</label>

<input id=deliverycity name=deliverycity type=text placeholder="city" required autofocus /><br>

<label for=country>State</label>

<select id="deliverycountry" name ="deliverycountry">

<option value="AL">Alabama (AL)</option>

<option value="AK">Alaska (AK)</option>

<option value="AZ">Arizona (AZ)</option>

<option value="AR">Arkansas (AR)</option>

<option value="CA">California (CA)</option>

<option value="CO">Colorado (CO)</option>

<option value="CT">Connecticut (CT)</option>

<option value="DE">Delaware (DE)</option>

<option value="DC">District Of Columbia (DC)</option>

<option value="FL">Florida (FL)</option>

<option value="GA">Georgia (GA)</option>

<option value="HI">Hawaii (HI)</option>

<option value="ID">Idaho (ID)</option>

<option value="IL">Illinois (IL)</option>

<option value="IN">Indiana (IN)</option>

<option value="IA">Iowa (IA)</option>

<option value="KS">Kansas (KS)</option>

<option value="KY">Kentucky (KY)</option>

<option value="LA">Louisiana (LA)</option>

<option value="ME">Maine (ME)</option>

<option value="MD">Maryland (MD)</option>

<option value="MA">Massachusetts (MA)</option>

<option value="MI">Michigan (MI)</option>

<option value="MN">Minnesota (MN)</option>

<option value="MS">Mississippi (MS)</option>

<option value="MO">Missouri (MO)</option>

<option value="MT">Montana (MT)</option>

<option value="NE">Nebraska (NE)</option>

<option value="NV">Nevada (NV)</option>

<option value="NH">New Hampshire (NH)</option>

<option value="NJ">New Jersey (NJ)</option>

<option value="NM">New Mexico (NM)</option>

<option value="NY">New York (NY)</option>

<option value="NC">North Carolina (NC)</option>

<option value="ND">North Dakota (ND)</option>

<option value="OH">Ohio (OH)</option>

<option value="OK">Oklahoma (OK)</option>

<option value="OR">Oregon (OR)</option>

<option value="PA">Pennsylvania (PA)</option>

<option value="RI">Rhode Island (RI)</option>

<option value="SC">South Carolina (SC)</option>

<option value="SD">South Dakota (SD)</option>

<option value="TN">Tennessee (TN)</option>

<option value="TX">Texas (TX)</option>

<option value="UT">Utah (UT)</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>

</fieldset>

<fieldset>

<legend>Payment</legend>

<input id=visa value = "VISA" name=cardtype type=radio checked="checked" />

<label for=visa>VISA</label>

<input id=amex value = "Discover" name=cardtype type=radio />

<label for=amex>Discover</label>

<input id=mastercard value = "Mastercard" name=cardtype type=radio />

<label for=mastercard>Mastercard</label>

<input id=AmericanExpress value="AmericanExpress" name=cardtype type=radio />

<label for=AmericanExpress>AmericanExpress</label><br>

<label for=name>Card</label>

<input id=cardnumber name=cardname type=number placeholder="card number" required autofocus /><br>

<label for=expiredate>Expiredate</label>

<select name="month" id="month" size="1">

<option value="00">MM</option>

<option value="January">01</option>

<option value="February">02</option>

<option value="March">03</option>

<option value="April">04</option>

<option value="May">05</option>

<option value="June">06</option>

<option value="July">07</option>

<option value="August">08</option>

<option value="September">09</option>

<option value="October">10</option>

<option value="November">11</option>

<option value="December">12</option>

</select>

<select name="year" id="year" size="1">

<option value="00">YY</option>

<option value="2018">2018</option>

<option value="2019">2019</option>

<option value="2020">2020</option>

<option value="2021">2021</option>

<option value="2022">2022</option>

</select><br>

<label for=ccv>CCV</label>

<input id="cvc" name = "cvc" type="number" placeholder="Cvc/Cvv" maxlength="3" />

</fieldset>

<fieldset>

<legend>Create Account</legend>

<label for=name>User Name</label>

<input id=username name=username type=text placeholder="Username" required autofocus /><br>

<label for=name>Password</label>

<input id=password name=password type=password placeholder="password" required autofocus /><br>

<label for=address>Verify Password</label>

<input id=confirm_password name=confirm_password type=password placeholder="password" required autofocus /><br>

</fieldset>

<div id="btnDiv">

<input type="submit" id = "submit" name="purchase" class="submitButton" value="Place Order">

<div>

</form>

</section>

</body>

<script>

function checkDeliveryAddres(id){

if(document.getElementById(id).checked){

var billingname = document.getElementById("billingname").value;

var billingname1 = document.getElementById("billingname1").value;

var billingaddr = document.getElementById("billingaddr").value;

var billingcity = document.getElementById("billingcity").value;

var selbox = document.getElementById("billingcountry");

var idx = selbox.selectedIndex;

var billingcountry = selbox.options[idx].value;

document.getElementById("deliveryname").value = billingname;

document.getElementById("deliveryname1").value = billingname1;

document.getElementById("deliveryaddr").value = billingaddr;

document.getElementById("deliverycity").value = billingcity;

document.getElementById("deliverycountry").value = billingcountry;

}

}

function checkpassword(){

if (document.getElementById('password').value != document.getElementById('confirm_password').value) {

alert('ensure passwords match');

return false;

}

}

function displayresults(){

var billingname = document.getElementById("billingname").value;

var billingname1 = document.getElementById("billingname1").value;

var billingaddr = document.getElementById("billingaddr").value;

var billingcity = document.getElementById("billingcity").value;

var selbox = document.getElementById("billingcountry");

var idx = selbox.selectedIndex;

var billingcountry = selbox.options[idx].text;

var deliveryname = document.getElementById("deliveryname").value;

var deliveryname1 = document.getElementById("deliveryname1").value;

var deliveryaddr = document.getElementById("deliveryaddr").value;

var deliverycity = document.getElementById("deliverycity").value;

var selbox = document.getElementById("deliverycountry");

var idx = selbox.selectedIndex;

var deliverycountry = selbox.options[idx].value;

var cvc = document.getElementById("cvc").value;

var cardnumber = document.getElementById("cardnumber").value;

var selbox = document.getElementById("month");

var idx = selbox.selectedIndex;

var month = selbox.options[idx].value;

var selbox = document.getElementById("year");

var idx = selbox.selectedIndex;

var year = selbox.options[idx].value;

var paymentType = document.querySelector('input[name = cardtype]:checked').value;

var username = document.getElementById("username").value;

var password = document.getElementById("password").value;

var confirm_password = document.getElementById("confirm_password").value;

document.writeln("The form has successfully been submitted");

document.writeln("You entered following data");

document.writeln("<pre>");

document.writeln("First Name : " + billingname);

document.writeln("Last Name : " + billingname1);

document.writeln("Address : " + billingaddr);

document.writeln("city : " + billingcity);

document.writeln("country : " + billingcountry);

document.writeln("dfirstname : " + deliveryname);

document.writeln("dlastname : " + deliveryname1);

document.writeln("daddress : " + deliveryaddr);

document.writeln("dcity : " + deliverycity);

document.writeln("dcountry : " + deliverycountry);

document.writeln("CCV : " + cvc);

document.writeln("Card Number : " + cardnumber);

document.writeln("Card Expiry Month : " + month);

document.writeln("Card Expiry Year : " + year);

document.writeln("Payment Type : " + paymentType);

document.writeln("username : " + username);

document.writeln("password : " + password);

document.writeln("confirm_password : " + confirm_password);

}

</script>

</html>

Related Questions

JavaScript Shopping Cart In this exercise, you will implement a shopping card pr
Question #3848784
JavaScript Write a simple JavaScript form that performs the following: 1- Receiv
Question #3724264
JavaScript and jQuery Help: We have to create a Class Maintenance application. I
Question #3831132
JavaScript and jQuery Help: for this Register web page, we need to do the follow
Question #3829595
JavaScript based single page Web apps Due: Tuesday February 14th a 11:55pm In th
Question #3791844
JavaScript c11 Question 1 (1 point) Which of the following statements about jQue
Question #3919898
JavaScript c11 Question 15 (1 point) In the jQuery for using a widget, you must
Question #3919899
JavaScript can anyone tell me whats wrong with my code when I click the pictures
Question #3844908
Hire Me For All Your Tutoring Needs
Integrity-first tutoring: clear explanations, guidance, and feedback.
Drop an Email at
drjack9650@gmail.com
Chat Now And Get Quote

Navigate

Previous
Javascript Help: 51. How can you match any metacharacters as literal values in a
Next
Javascript Problem static void readData(Scanner input) { int TargetRect_w = inpu

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