Both codes <!DOCTYPE html> <html> <head> <title>Week 8 Lab - JavaScript DOM and Arrays</title> <meta charset="utf-8">...
Both codes
<!DOCTYPE html>
<html>
<head>
<title>Week 8 Lab - JavaScript DOM and
Arrays</title>
<meta charset="utf-8">
</head>
<body>
<h2>Order Form</h2>
<form name="orderForm" method="post"
action="processForm.html">
<table>
<tr>
<th colspan="2">Personal Information</th>
</tr>
<tr>
<td>First Name:</td>
<td><input type="text" name="firstName" id="firstName"
size="30"></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input type="text" name="lastName" id="lastName"
size="30"></td>
</tr>
<tr>
<td>Address:</td>
<td><input type="text" name="address" id="address"
size="30"></td>
</tr>
<tr>
<td>City:</td>
<td><input type="text" name="city" id="city"
size="30"></td>
</tr>
<tr>
<td>Province:</td>
<td><select name="province" id="province"
size="1">
<option disabled>Select a province</option>
<option value="BC">British Columbia</option>
<option value="AB">Alberta</option>
<option value="SK">Saskatchewan</option>
<option value="MB">Manitoba</option>
<option value="ON">Ontario</option>
<option value="QC">Québec</option>
<option value="NB">New Brunswick</option>
<option value="NS">Nova Scotia</option>
<option value="PE">Prince Edward Island</option>
<option value="NF">Newfoundland</option>
<option value="YK">Yukon</option>
<option value="NWT">Northwest
Territories</option>
<option value="NU">Nunavut</option>
</select>
</td>
</tr>
<tr>
<td>Postal Code:</td>
<td><input type="text" name="postalCode" id="postalCode"
maxlength="6"></td>
</tr>
<tr>
<th colspan="2">Order Information</th>
</tr>
<tr>
<td rowspan="3">Select your products:<br>
<span id="productError" class="errorMessage"
hidden></span></td>
<td>Widget #1
<input type="text" name="widget1qty" id="widget1qty" size="1"
value="0">Qty @
<strong>$5.00/ea</strong></td>
</tr>
<tr>
<td>Widget #2
<input type="text" name="widget2qty" id="widget2qty" size="1"
value="0">Qty @
<strong>$15.00/ea</strong></td>
</tr>
<tr>
<td>Widget #3
<input type="text" name="widget3qty" id="widget3qty" size="1"
value="0">Qty @
<strong>$25.00/ea</strong></td>
</tr>
<tr>
<td rowspan="3">Shipping Type:</td>
<td>Standard ($5.00)<input type="radio"
name="shippingType" id="shippingTypeStandard" value="Standard"
checked></td>
</tr>
<tr>
<td>Express ($10.00)<input type="radio"
name="shippingType" id="shippingTypeExpress"
value="Express"></td>
</tr>
<tr>
<td>Overnight ($20.00)<input type="radio"
name="shippingType" id="shippingTypeOvernight"
value="Overnight"></td>
</tr>
<tr>
<th colspan="2">Submit Order</th>
</tr>
<tr>
<td><input type="submit" name="btnSubmit" id="btnSubmit"
value="Submit Order"></td>
<td><input type="reset" name="btnReset" id="btnReset"
value="Reset Form"></td>
</tr>
</table>
</form>
</body>
</html>
-------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<title>JavaScript DOM and Arrays</title>
<meta charset="utf-8">
</head>
<body>
<h1>Form Submitted Successfully</h1>
</body>
</html>
----------------------------------------
Instructions
The form provided is a basic order form for 'widgets'. The form accepts some personal information, item quanitites, and a shipping method. Your task is to ensure that the user inputs the correct data. In particular:
1. The firstName, lastName, address, city, province, and postalCode fields must all have a value.
2. The postalCode field must be 6 digits long
3. The quantity fields for the widgits must contain a number greater than or equal to zero
4. At least one item must be ordered
The user must be notified of the errors in the form. I am going to allow for some creativity on your part on how this is to be done. The only requirement is that it is clear to the user which fields have errors, and what the errors are.
Finally, if the form submission is valid, display an alert to the user confirming the successful submission of their form, and inform them of the total price. If there are errors in the form, it should not submit.
Homework Answers
Here is the JavaScript file for validation. Please reference this file from the HTML file by placing this tag in the head section of the HTML code.
<script type="text/javascript" src="validate.js"> </script>
where validate.js is the name of the below JavaScript file.
validate.js:
var validate = function()
{
var firstName = document.getElementById("firstName").value;
if(firstName === undefined || firstName == "")
{
alert("Field First Name is required.");
return 0;
}
var lastName = document.getElementById("lastName").value;
if(lastName === undefined || lastName == "")
{
alert("Field Last Name is required.");
return 0;
}
var city = document.getElementById("city").value;
if(city === undefined || city == "")
{
alert("Field city is required.");
return 0;
}
var province = document.getElementById("province").value;
if(province === undefined || province == "")
{
alert("Field province is required.");
return 0;
}
var postalCode = document.getElementById("postalCode").value;
if(postalCode === undefined || province == "")
{
alert("Field postal code is required.");
return 0;
}
if(!isNaN(postalCode))
{
if(postalCode.length != 6)
{
alert("Postal code should be exactly of 6 digits long");
return 0;
}
}
else
{
alert("Postal code should be numeric and 6 digits long");
return 0;
}
var widget1qty = parseInt(document.getElementBydId("widget1qty").value);
var widget2qty = parseInt(document.getElementBydId("widget2qty").value);
var widget3qty = parseInt(document.getElementBydId("widget3qty").value);
if(widget1qty < 0)
{
alert("Widget 1 quantity is not valid");
return 0;
}
if(widget2qty < 0)
{
alert("Widget 2 quantity is not valid");
return 0;
}
if(widget2qty < 0)
{
alert("Widget 3 quantity is not valid");
return 0;
}
if(widget1qty == 0 || widget2qty == 0 || widget3qty == 0)
{
alert("Atleast 1 item should be ordered");
return 0;
}
alert("Validation successful");
return 1;
}
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementById("btnSubmit").addEventListener("click", function(evt)
{
if(!validate())
{
evt.preventDefault();
}
});
});
Add Answer to:
Both codes
<!DOCTYPE html>
<html>
<head>
<title>Week 8 Lab - JavaScript DOM and
Arrays</title>
<meta charset="utf-8">...
How to make all the buttons work using javascript? <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta...
How to make all the buttons work using javascript? <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script> function openAccount() { /* - get the account and initial amount values - check that all necessary information is provided - call the setCookie function to create account */ } function Deposit() { /* - get the account and amount values - check that all necessary information is provided - alter cookie with current amount of deposit */ } function...
i'm having trouble with 1 and 3 using html, javascript and jquery 1) Change the "Search"...
i'm having trouble with 1 and 3 using html, javascript and jquery 1) Change the "Search" link on the left to a button that when clicked, hide all the fields on the form and display the text "This is a search feature..." 3) When the user fills the form and clicks "Login", the values inputted should be displayed in the empty row (under Login) of the page. The display should be in the form: Student ID: <input value> Student Name:...
I need help writting a Javascript function that does the following its for a HTML/CSS Shopping...
I need help writting a Javascript function that does the
following its for a HTML/CSS Shopping Cart Page
CODE
This page contains a list of the selected products that includes an image, name, price, quantity, and cost) Because the process is implemented not as real, three products along with its image and price are displayed on the page. The product ID of each product is stored in a hidden textbox. The default amount of each product is 1 and the...
Javascript to edit a HTML file. Where to begin? <!doctype html> <html> <head> <meta charset="utf-8"> <title>TODO:...
Javascript to edit a HTML file. Where to begin? <!doctype html> <html> <head> <meta charset="utf-8"> <title>TODO: Change The Title</title> </head> <body> <h1></h1> <p>First paragraph.</p> <p class="intro">Second <span>paragraph</span>.</p> <button id="start">Start</button> <main> </main> <!-- Test 6: DOM Programming You MAY consult the notes for week 7, but you MAY NOT discuss this test or your code with any other students. All work must be your own. Instructions: 1. Put all solution code in a file named solution.js. When you upload your solution to...
This is my code so far: <!DOCTYPE html> <html> <head> <title>JavaScript is fun</title> <meta charset="utf-8" />...
This is my code so far: <!DOCTYPE html> <html> <head> <title>JavaScript is fun</title> <meta charset="utf-8" /> </head> <body> <script type ="text/javascript"> //declare a variable and store text in it var x = "JavaScript is fun"; //write the variable 5 times document.write(x + x + x + x + x); //store 5 as string in variable x x = "5"; //store 3 as string in variable y var y = "3"; //write the value x + y to the document document.write("<br>");...
HTML Coding <html> <head> <title> Contact -- Charles Robertson </title> </head> <body bgcolor="white"> <table width="700" height="500"...
HTML Coding <html> <head> <title> Contact -- Charles Robertson </title> </head> <body bgcolor="white"> <table width="700" height="500" border="10"> <!-----row---1----logo---> <tr><td> <img src="20150516_084745" width="700" height="200"> </td></tr> <!-----row-2-navigation-----> <tr><td> <!----start-navigation-table----> <table width="700" height="100" border="5" bgcolor="lightgreen" > <tr><td><a href="HerbFarm.html"> <center> HOME </center></a></td> <td><a href="about3.html"> <center> ABOUT </center></a></td> <td><a href="contact3.html"> <center> CONTACT </center></a></td> <td><a href="gallery3.html"> <center> GALLERY </center></a></td> </tr> </table> <!------end-navigation-table----> </td></tr> <tr><td> <h1>Contact </h1> <form action="thankyou.html"> </form> <div class="row"> <div class="col-75"> <div class="container"> <form action="/action_page.php"> <div class="row"> <div class="col-50"> <h3>Billing Address</h3> <label for="fname"><i...
<html> <head> <title>Sign Up page</title> <form name="validationForm" method="post" onsubmit="return checkvalidation()"> &n
<html> <head> <title>Sign Up page</title> <form name="validationForm" method="post" onsubmit="return checkvalidation()"> <!--div class--> <div class="formvalidation"> <label>Your first Name</label> <span id="showname"></span> <!--label for firstname--> <input type="text" name="firstname" class="formsignup" id ="firstn" placeholder="Enter your Name"> <br><br> <!--lastname--> <label>Your last Name</label> <span id="showlname"></span> <input type="text" name="lastname" class="formsignup" id="lastn" placeholder="Enter your last Name"> <br><br> <!--email--> <label>Your Email</label> <span id="showemail"></span> <input type="email" name="emailid" class="formsignup" size="45" id="emailn" placeholder="Enter your Email"> <br><br> <input type="submit" value="send"> </div> </form> <script> function checkvalidation(){ var name = document.forms["validationForm"]["firstname"].value; var lname...
PHP Can't get my code to work, what am I doing wrong? <!DOCTYPE html> <html> <head>...
PHP
Can't get my code to work, what am I doing wrong?
<!DOCTYPE html>
<html>
<head>
<script>
</script>
</head>
<body>
<h2>Temperature Conversion Table</h2>
<h4>Enter a starting value in degrees Fahrenheit and an
increment value.</h4>
<form name="myTemp"
onsubmit="convertCelcius()" method="post">
<input type="text" name="temperature"> Enter an value in
degrees Fahrenheit<br><br>
<input type="radio" name="degIncrement" id="degIncrement5">
Convert in increment in 5 degrees<br>
<input type="radio" name="degIncrement" id="degIncrement10">
Convert in increment in 10 degrees
<br/><br/><input type="submit"
value="Submit">
</form>
<?php
if( $_POST["temperature"] || $_POST["degincrement"] ) {
//get he...
<!DOCTYPE html> <html> <head> <title>Products</title> <style> .heading { text-align: center; font-size: 40px; } #menu { text-align:...
<!DOCTYPE html> <html> <head> <title>Products</title> <style> .heading { text-align: center; font-size: 40px; } #menu { text-align: center; } #menu li { display: inline; font-size: 26px; margin-left: 20px; } .container{ overflow: hidden; margin: 30px; } img { float: left; width: 40vh; height: 40vh; margin-left: 10%; } table { float: right; margin-right: 10%; } table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { font-size: 26px; padding: 10px; text-align: left; } a { color: black; } a:visted {...
I need help writting a Javascript function that does the
following its for a HTML/CSS Shopping Cart Page
CODE
This page contains a list of the selected products that includes an image, name, price, quantity, and cost) Because the process is implemented not as real, three products along with its image and price are displayed on the page. The product ID of each product is stored in a hidden textbox. The default amount of each product is 1 and the...
PHP
Can't get my code to work, what am I doing wrong?
<!DOCTYPE html>
<html>
<head>
<script>
</script>
</head>
<body>
<h2>Temperature Conversion Table</h2>
<h4>Enter a starting value in degrees Fahrenheit and an
increment value.</h4>
<form name="myTemp"
onsubmit="convertCelcius()" method="post">
<input type="text" name="temperature"> Enter an value in
degrees Fahrenheit<br><br>
<input type="radio" name="degIncrement" id="degIncrement5">
Convert in increment in 5 degrees<br>
<input type="radio" name="degIncrement" id="degIncrement10">
Convert in increment in 10 degrees
<br/><br/><input type="submit"
value="Submit">
</form>
<?php
if( $_POST["temperature"] || $_POST["degincrement"] ) {
//get he...
Most questions answered within 3 hours.
-
If you mixed 35.0 mLmL of 0.100 M Tris-HCl with 65.0
mLmL of 0.200 M Tris-base, what would...
asked 1 minute ago -
Which force do you think wields a stronger influence over our
ethical behavior – our personal...
asked 7 minutes ago -
11.1 In the northeast
regions of the United States and in eastern Canada, many people
heat their...
asked 6 minutes ago -
Explain traveling wave theory. Explain how the peaking of the
wave leads to action potentials and...
asked 5 minutes ago -
What is the entropy change to the surroundings when 1 mol of ice
melts in someone's...
asked 7 minutes ago -
Are adult gamers less likely to use a gaming console (Xbox,
PlayStation, Wii, etc...) than teen...
asked 12 minutes ago -
Pt1
An electrochemical cell is set up at 25°C based on the overall
reaction represented by...
asked 14 minutes ago -
Bruin, Inc., has identified the following two mutually
exclusive projects:
Year
Cash Flow (A)
Cash...
asked 16 minutes ago -
A mutual fund salesperson has arranged to call on four people
tomorrow. Based on past experience...
asked 19 minutes ago -
The decomposition of SO2Cl2 is first order
and has a rate constant of + 2.90 x...
asked 41 minutes ago -
A solid, frictionless cylindrical reel of mass M=5.00kg and
radius R=0.55m is used to draw water...
asked 1 hour ago -
The work done by the spring's restoring force
on the free end of a spring while...
asked 36 minutes ago