Create JavaScript to validate the form The form accepts some personal information, item quanitites, and a...
Create JavaScript to validate the form
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:
The firstName, lastName, address, city, province, and postalCode fields must all have a value.
The postalCode field must be 6 digits long
The quantity fields for the widgits must contain a number greater than or equal to zero
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
Code for Form validation:
<html>
<head>
<title>Shopping Form</title>
<script type="text/javascript">
//local variable
var itemprice;
var finalprice;
var itemname;
//function validation for validation and calculate value
function validation()
{
//store text box value into variable
var fname=document.getElementById("FirstName").value;
var lname=document.getElementById("LastName").value;
var address=document.getElementById("Address").value;
var city=document.getElementById("City").value;
var province=document.getElementById("Province").value;
var postalcode=document.getElementById("PostalCode").value;
var items = document.getElementById('Items').value;
var quanitites=document.getElementById("Quanitites").value;
var shipping_method = document.getElementById('Shipping_method').value;
//validation for null value in text box
if (fname=="" || lname=="" || address=="" || city=="" || province=="" || postalcode=="" || quanitites=="")
{
alert("pleas fill appropriate fild");
}
//validation for shiping metod is not selected
if(shipping_method==0)
{
alert("Please select shipping method");
}
else
{
//if condition for choose the item and calculate the value
if(items==1)
{
//store price and item name in local variable for display value
itemprice=10000;
itemname="Mi TV 4A Pro 49-inch";
}
else if(items==2)
{
itemprice=9000;
itemname="LG Smart TV 55-inch";
}
else if(items==3)
{
itemprice=11000;
itemname="Sony Bravia A8F TV 55-inch";
}
else if(items==4)
{
itemprice=102000;
itemname="Xiaomi Mi TV 4";
}
else
{
alert("choose item")
}
//confirm box if user press button to submit or not
if(confirm("press button"))
{
finalprice=itemprice*eval(quanitites);
document.write("you product is "+itemname);
document.write("<br>your Quanitites is "+quanitites);
document.write("<br>your final price of product "+finalprice);
}
else
{
alert("you press cancel button");
}
}
}
</script>
</head>
<body>
<form action="" id="myform" name="myform">
<p>
<label for='FirstName'>First Name:</label>
<input type="text" id="FirstName" name="FirstName" />
</p>
<p>
<label for='LastName'>Last Name:</label>
<input type="text" id="LastName" name="LastName" />
</p>
<p>
<label for='Address'>Address:</label>
<textarea cols="20" rows="5" id="Address" name="Address"></textarea>
</p>
<p>
<label for='City'>City:</label>
<input type="text" id="City" name="City" />
</p>
<p>
<label for='Province'>Province:</label>
<input type="text" id="Province" name="Province" />
</p>
<p>
<label for='PostalCode '>PostalCode :</label>
<input type="text" id="PostalCode" name="PostalCode" maxlength=6 />
</p>
<p>
<label for='Items'>Items Name:</label>
<select id="Items" name="Items">
<option value="0" selected="selected">[choose yours]</option>
<option value="1">Mi TV 4A Pro 49-inch</option>
<option value="2">LG Smart TV 55-inch</option>
<option value="3">Sony Bravia A8F TV 55-inch</option>
<option value="4">Xiaomi Mi TV 4</option>
</select>
</p>
<p>
<label for='Quanitites'>Quanitites:</label>
<input type="text" id="Quanitites" name="Quanitites" />
</p>
<p>
<label for='Shipping_method'>Shipping method:</label>
<select id="Shipping_method" name="Shipping_method">
<option value="0" selected="selected">[choose yours]</option>
<option value="1">First Class</option>
<option value="2">Two-Day</option>
<option value="3">Fedex Overnight</option>
</select>
</p>
<p>
<input type="submit" name="submit" value="Submit" onclick="validation();">
</p>
</form>
</body>
Output:
Thank you if you have any query regarding above answer please ask me in comment box.
if you like my work appreciate with thums up.
Thank You.
Code for Form validation:
<html>
<head>
<title>Shopping Form</title>
<script type="text/javascript">
//local variable
var itemprice;
var finalprice;
var itemname;
//function validation for validation and calculate value
function validation()
{
//store text box value into variable
var fname=document.getElementById("FirstName").value;
var lname=document.getElementById("LastName").value;
var address=document.getElementById("Address").value;
var city=document.getElementById("City").value;
var province=document.getElementById("Province").value;
var postalcode=document.getElementById("PostalCode").value;
var items = document.getElementById('Items').value;
var quanitites=document.getElementById("Quanitites").value;
var shipping_method = document.getElementById('Shipping_method').value;
//validation for null value in text box
if (fname=="" || lname=="" || address=="" || city=="" || province=="" || postalcode=="" || quanitites=="")
{
alert("pleas fill appropriate fild");
}
//validation for shiping metod is not selected
if(shipping_method==0)
{
alert("Please select shipping method");
}
else
{
//if condition for choose the item and calculate the value
if(items==1)
{
//store price and item name in local variable for display value
itemprice=10000;
itemname="Mi TV 4A Pro 49-inch";
}
else if(items==2)
{
itemprice=9000;
itemname="LG Smart TV 55-inch";
}
else if(items==3)
{
itemprice=11000;
itemname="Sony Bravia A8F TV 55-inch";
}
else if(items==4)
{
itemprice=102000;
itemname="Xiaomi Mi TV 4";
}
else
{
alert("choose item")
}
//confirm box if user press button to submit or not
if(confirm("press button"))
{
finalprice=itemprice*eval(quanitites);
document.write("you product is "+itemname);
document.write("<br>your Quanitites is "+quanitites);
document.write("<br>your final price of product "+finalprice);
}
else
{
alert("you press cancel button");
}
}
}
</script>
</head>
<body>
<form action="" id="myform" name="myform">
<p>
<label for='FirstName'>First Name:</label>
<input type="text" id="FirstName" name="FirstName" />
</p>
<p>
<label for='LastName'>Last Name:</label>
<input type="text" id="LastName" name="LastName" />
</p>
<p>
<label for='Address'>Address:</label>
<textarea cols="20" rows="5" id="Address" name="Address"></textarea>
</p>
<p>
<label for='City'>City:</label>
<input type="text" id="City" name="City" />
</p>
<p>
<label for='Province'>Province:</label>
<input type="text" id="Province" name="Province" />
</p>
<p>
<label for='PostalCode '>PostalCode :</label>
<input type="text" id="PostalCode" name="PostalCode" maxlength=6 />
</p>
<p>
<label for='Items'>Items Name:</label>
<select id="Items" name="Items">
<option value="0" selected="selected">[choose yours]</option>
<option value="1">Mi TV 4A Pro 49-inch</option>
<option value="2">LG Smart TV 55-inch</option>
<option value="3">Sony Bravia A8F TV 55-inch</option>
<option value="4">Xiaomi Mi TV 4</option>
</select>
</p>
<p>
<label for='Quanitites'>Quanitites:</label>
<input type="text" id="Quanitites" name="Quanitites" />
</p>
<p>
<label for='Shipping_method'>Shipping method:</label>
<select id="Shipping_method" name="Shipping_method">
<option value="0" selected="selected">[choose yours]</option>
<option value="1">First Class</option>
<option value="2">Two-Day</option>
<option value="3">Fedex Overnight</option>
</select>
</p>
<p>
<input type="submit" name="submit" value="Submit" onclick="validation();">
</p>
</form>
</body>
Output:
Thank you if you have any query regarding above answer please ask me in comment box.
if you like my work appreciate with thums up.
Thank You.
Add Answer to:
Create JavaScript to validate the form
The form accepts some personal information, item quanitites, and
a...
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...
JAVASCRIPT Create a simple web page that contains a JavaScript form that will allow the user...
JAVASCRIPT Create a simple web page that contains a JavaScript form that will allow the user to answer 7 trivia questions. Your trivia game should contain: 2 text boxes 2 select dropdowns 2 multiple choice questions (using radio buttons, 4 options min) 1 choose-all-that-apply (checkboxes, 4 options min, one answer should be "None of the above"). No part-points for semi-correct answers. The questions can cover any topic you wish - but please keep it professional and easy enough that the...
Develop an HTML form that could be used to enter your book information (Books, Authors, and...
Develop an HTML form that could be used to enter your book information (Books, Authors, and Publishers) start with the HTML/JavaScript template provided Expand upon it! What field information would you enter into a system? Have your form use more then just character text fields ... radio buttons, pick lists, and other elements make your form easier to use and you don't need to do lots of JavaScript checks. What fields would be mandatory ... which could be left blank?...
NEED HELP with HTML with Javascript embedding for form validation project below. I have my code...
NEED HELP with HTML with Javascript embedding
for form validation project below. I have my code
below but I'm stuck with validation. If anyone can fix it, I'd
really appreciate.
******************************************************************************
CODE:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project
Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Nice</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<script>
var textFromTextArea;
function getWords(){
var text =...
NEED HELP with HTML with Javascript embedding
for form validation project below. I have my code
below but I'm stuck with validation. If anyone can fix it, I'd
really appreciate.
******************************************************************************
CODE:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project
Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Nice</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<script>
var textFromTextArea;
function getWords(){
var text =...
Most questions answered within 3 hours.
-
1. Under what conditions do real gases behave most
like an ideal gas?
3. A student had an...
asked 50 minutes ago -
statics
2) Given: A cantilevered beam has a uniform distributed load as shown 1000 N/m 4m...
asked 4 years ago -
Depression-Please add at least two pieces of
information that you found interesting on this mental health
disability,...
asked 2 hours ago -
A beam of light is incident from air on the surface of a liquid.
If the...
asked 2 hours ago -
Discuss the role of a Christian worldview in IT project
management and provide an example of...
asked 3 hours ago -
The mayor of a town has proposed a plan for the construction of
a new bridge....
asked 3 hours ago -
1)What happens when the refracted angle approaches 90 degrees?
_________________________________
2) Based upon what happens, estimate...
asked 3 hours ago -
Do all collisions between reactant molecules lead to products?
Explain.
Name and briefly explain the five...
asked 4 hours ago -
The diol shown undergoes reactions with reducing and oxidizing agents to yield three different products: A, B, and C. Draw the major organic product for each of the reactions shown.
asked 6 hours ago -
pka
given for 4 acids, find the weakest acid.
HF:3.14,HNO2:3.39,H2SO3:1.81,H2CO3:6.37
asked 6 hours ago -
If AA and BB are independent events with P(A)=0.9P(A)=0.9 and
P(B)=0.4P(B)=0.4, find P(A AND B)P(A AND...
asked 6 hours ago -
What are the current practices for inclusion of each group
ageism and disability in the workplace?...
asked 6 hours ago