Validating form data: Make a copy of the order form from lab exercise 4 and name
ID: 3601052 • Letter: V
Question
Validating form data: 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.)
lab 4 code: [
<!DOCTYPE html>
<html>
<head>
<title>Payment</title>
<script type="text/javascript">
function calculateCost(){
var sawPrice = 28.00;
var plierPrice = 8.99;
var hedgePrice=15.95;
var sawQty=document.getElementById("saw_qty").value;
var plierQty=document.getElementById("pliers_qty").value;
var hedgeQty=document.getElementById("hedgeclippers__qty").value;
var total=(sawPrice*sawQty)+(plierPrice*plierQty)+(hedgePrice*hedgeQty);
total = total*1.07;
var result =confirm("The total cost of your order is: $"+ total.toFixed(2));
if(result == true){
document.getElementById("some_form").submit();
}
}
</script>
</head>
<body>
<form id="some_form" action="/formtest.php">
<table>
<tr>
<td><label for="customer_name">Customer Name: </label> </td>
<td><input type="text" id="customer_name" name="Customer Name"> <br/> </td>
</tr>
<tr>
<td><label for="address">Address: </label> </td>
<td><input type="text" id="address" name="Address"> <br/> </td>
</tr>
<tr>
<td><label for="saw_qty">Saw Quantity</label></td>
<td><input type="number" id="saw_qty" min="0" max="99" value="0"></td>
</tr>
<tr>
<td><label for="pliers_qty">Pliers Quantity</label></td>
<td><input type="number" id="pliers_qty" min="0" max="99" value="0"></td>
</tr>
<tr>
<td><label for="hedgeclippers__qty">Hedge Clippers Quantity</label></td>
<td><input type="number" id="hedgeclippers__qty" min="0" max="99" value="0"></td>
</tr>
<tr>
<td>Payment Mode:<label for="payment_mode_visa"></label></td>
<td><input type="radio" name="payment" value="visa" checked id="payment_mode_visa">Visa</td>
<td><label for="payment_mode_mastercard"></label> </td>
<td><input type="radio" name="payment" value="master" id="payment_mode_mastercard">Master Card</td>
<td><label for="payment_mode_americanExpress"></label> </td>
<td><input type="radio" name="payment" value="american_express" id="payment_mode_americanExpress">American Express</td>
</tr>
<tr>
<td><br><br> <button type="button">Submit </button></td>
</tr>
</table>
</form>
</body>
</html>
]
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.
Explanation / Answer
<!DOCTYPE html>
<html>
<head>
<title>Payment</title>
<script>
//numbers or empty string are accepted
var numbersOnly = /^-?d*.?d*$/
//var numbersOnly = /^d+$/;
//var decimalOnly = /^s*-?[1-9]d*(.d{1,2})?s*$/;
function testInputData() {
//numbers or empty string are accepted
var numbersOnly = /^-?d*.?d*$/
//var numbersOnly = /^d+$/;
//var decimalOnly = /^s*-?[1-9]d*(.d{1,2})?s*$/;
var saw_qty = document.getElementById("saw_qty").value;
var pliers_qty = document.getElementById("pliers_qty").value;
var hedgeclippers__qty = document.getElementById("hedgeclippers__qty").value;
if(!numbersOnly.test(saw_qty))
{
alert("Enter valid numeric value in Saw Quantity Box");
return 0;
}
if(!numbersOnly.test(pliers_qty))
{
alert("Enter valid numeric value in Pliers Box");
return 0;
}
if(!numbersOnly.test(hedgeclippers__qty))
{
alert("Enter valid numeric value in Hedgeclippers Box");
return 0;
}
}
</script>
</head>
<body>
<form id="some_form" action="http://weblab.kennesaw.edu/formtest.php" method="POST">
<table>
<tr>
<td><label for="customer_name">Customer Name: </label> </td>
<td><input type="text" id="customer_name" name="Customer Name"> <br/> </td>
</tr>
<tr>
<td><label for="address">Address: </label> </td>
<td><input type="text" id="address" name="Address"> <br/> </td>
</tr>
<tr>
<td><label for="saw_qty">Saw Quantity</label></td>
<td><input type="text" id="saw_qty" ></td>
</tr>
<tr>
<td><label for="pliers_qty">Pliers Quantity</label></td>
<td><input type="text" id="pliers_qty"></td>
</tr>
<tr>
<td><label for="hedgeclippers__qty">Hedge Clippers Quantity</label></td>
<td><input type="text" id="hedgeclippers__qty" ></td>
</tr>
<tr>
<td>Payment Mode:<label for="payment_mode_visa"></label></td>
<td><input type="radio" name="payment" value="visa" checked id="payment_mode_visa">Visa</td>
<td><label for="payment_mode_mastercard"></label> </td>
<td><input type="radio" name="payment" value="master" id="payment_mode_mastercard">Master Card</td>
<td><label for="payment_mode_americanExpress"></label> </td>
<td><input type="radio" name="payment" value="american_express" id="payment_mode_americanExpress">American Express</td>
</tr>
<tr>
<td><br><br> <input type="submit" value="submit"></td>
</tr>
</table>
</form>
</body>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.