Homework SourseMake a copy of the order form from lab exercise 4 and name i
Make a copy of the order form from lab exercise 4 and name it l6p2.php. Remove the JavaScript code to calculate the total price. If you used anything other than a plain text box for quantities, change the quantity inputs to type=\"text\". (The goal of this part of the assignment is for you to use regular expressions to validate text.)
Add JavaScript code to produce an error message and suppress submission of the form if any quantity field contains non-numeric data. (It\'s OK for a quantity to be empty, but if it\'s non-empty, it must have only numbers.) Add an action= attribute to your <form> tag to submit the form to http://weblab.kennesaw.edu/formtest.php. Test that the form is submitted correctly when the quantities are numeric or empty, and that an error message is produced otherwise. (Regular expressions are your friend. Anything that\'s not a digit is bad. What is the predefined class for non-digits?)
Add to your index page a link to your new order form.
As with the previous assignment, the goal is to learn to validate with JavaScript. The use of an input element with type \"number\" or anything similar will earn a zero on this part of the assignment. You must use JavaScript for the validation.
Adjust it to this:
<!DOCTYPE html>
<html>
<head>
<title> My Table </title>
<script>
function validateForm() {
var a=document.getElementById(\"apple_qty\").value;
var b=document.getElementById(\"bb_qty\").value;
var c=document.getElementById(\"grape_qty\").value;
var price= (a*4)+(b*6)+(c*8.50);
var total=price*1.07;
if (confirm(\"The total cost of order is: \"+total) == true)
{
return true;
}
else{ return false;
}
}
</script>
</head>
<body>
<h1 > Fruit Table </h1>
<table
>
<tr>
<th>Fruit Name </th>
<th>Price </th>
<th> Shipping weight </th>
</tr>
<tr>
<td> Apples</td>
<td>$4.00 </td>
<td> 5.3 lb</td>
</tr>
<tr>
<td> Blueberries</td>
<td>$6.00 </td>
<td>6 lb</td>
</tr>
<tr>
<td> Grapes</td>
<td>$8.50 </td>
<td>9 lb</td>
</tr>
</table>
<br>
<br>
<form name=\"myForm\" action=\"http://weblab.kennesaw.edu/formtest.php\"
onsubmit=\"return validateForm()\" method=\"post\">
Customer Name <input type=\"text\" name=\"Customer name\"> <br />
Apples Quantity <input type=\"text\" id=\"apple_qty\" name=\"Apples unit\"><br />
Blueberries Quantity <input type=\"text\" id=\"bb_qty\" name=\"Blueberries unit\"><br />
Grapes Quantity <input type=\"text\" id=\"grape_qty\" name=\"Grapes unit\"><br />
Shipping Address <input type=\"text\" name=\"Shipping address\"> <br />
Payment Mode
<select name=\"Payment mode\" >
<option value=\"Visa\"> Visa </option>
<option value=\"MasterCard\"> MasterCard</option>
<option value=\"Amex\">American Express</option>
</select>
<input type=\"submit\" value=\"Place order\"> <input type=\"reset\" value=\"Clear Form\">
</form>
</body>
</html>
Solution
The program with the javascript function is as follows:
<!DOCTYPE html>
<html>
<head>
<title> My Table </title>
<script>
function validateForm() {
var a=document.getElementById(\"apple_qty\").value;
var b=document.getElementById(\"bb_qty\").value;
var c=document.getElementById(\"grape_qty\").value;
if(isNaN(a)){
alert(\"Enter a numeric value for Apple Quantity\");
return false;
}else if(isNaN(b)){
alert(\"Enter a numeric value for BlueBerries Quantity\");
return false;
}else if(isNaN(c)){
alert(\"Enter a numeric value for Grapes Quantity\");
return false;
}else{
var price= (a*4)+(b*6)+(c*8.50);
var total=price*1.07;
if (confirm(\"The total cost of order is: \"+total) == true)
{
return true;
}
else{ return false;
}
}
}
</script>
</head>
<body>
<h1 > Fruit Table </h1>
<table
>
<tr>
<th>Fruit Name </th>
<th>Price </th>
<th> Shipping weight </th>
</tr>
<tr>
<td> Apples</td>
<td>$4.00 </td>
<td> 5.3 lb</td>
</tr>
<tr>
<td> Blueberries</td>
<td>$6.00 </td>
<td>6 lb</td>
</tr>
<tr>
<td> Grapes</td>
<td>$8.50 </td>
<td>9 lb</td>
</tr>
</table>
<br>
<br>
<form name=\"myForm\" action=\"http://weblab.kennesaw.edu/formtest.php\"
onsubmit=\"return validateForm()\" method=\"post\">
Customer Name <input type=\"text\" name=\"Customer name\"> <br />
Apples Quantity <input type=\"text\" id=\"apple_qty\" name=\"Apples unit\"><br />
Blueberries Quantity <input type=\"text\" id=\"bb_qty\" name=\"Blueberries unit\"><br />
Grapes Quantity <input type=\"text\" id=\"grape_qty\" name=\"Grapes unit\"><br />
Shipping Address <input type=\"text\" name=\"Shipping address\"> <br />
Payment Mode
<select name=\"Payment mode\" >
<option value=\"Visa\"> Visa </option>
<option value=\"MasterCard\"> MasterCard</option>
<option value=\"Amex\">American Express</option>
</select>
<input type=\"submit\" value=\"Place order\" > <input type=\"reset\" value=\"Clear Form\">
</form>
</body>
</html>
