Using Notepad++ or an ordinary ASCII text editor such as pico or vi. You may not
ID: 3855183 • Letter: U
Question
Using Notepad++ or an ordinary ASCII text editor such as pico or vi. You may not use HTML or wysiwyg editors.
using this order form
<html>
<head>
<title>
l2p3.html
</title>
</head>
<body>
<h1 align = "center"> Customers Order Form</h1>
</br>
</br>
<form action ="/formtest.php">
<label for="lblitems">These items are available : </label> (1) pliers (2) Chisels (3) saw</br></br>
<label for ="lblpliers"> Number of pliers </label> <input type="number" name="noofpliers" value=""></br></br>
<label for = "lblChisels"> Number of chisels </label> <input type="number" name="noofchisels" value=""></br></br>
<label for = "lblsaw"> Number of Saws </label> <input type="number" name="saw" value=""></br></br>
<label for = "lblCcustomer"> Customers Name: </label> <input type="text" name="customername" value=" "></br>
</br>
<label for = "lblShipping">Customers Shipping Address: </label> <textarea name = "shippingaddress" value = "" rows="4" cols="50"></textarea>
</br>
</br>
<label for = "lblPayment">Customers Payment Method:--<label> </br> <input type="radio" name="payment" value="Visa" checked> Visa<br>
<input type="radio" name="payment" value="MasterCard"> MasterCard<br>
<input type="radio" name="payment" value="American Express"> American Express
</br>
</br>
</br>
<center>
<input type="submit" value="Submit" ></center>
</form>
</body>
</html>
Add JavaScript to your program to compute the total cost of the order. The total cost will be the sum of the price of each item times the quantity ordered times 1.07 to allow for taxes. Use a JavaScript confirm() call to display "The total cost of your order is (whatever the cost is)." The confirm() function displays a message box with your message and buttons for "OK" and "Cancel." It returns true of the "OK" button is clicked and false if the cancel button is clicked.
If the user of your form clicks OK, the form should be submitted to formtest.php as before. However, if the user clicks "Cancel" the form should not be submitted.
Explanation / Answer
I have written the function in header section although it can also be written in body as well. I have given validations and also the submission from prompt as you wanted.
I have also made some changes in HTML as I have added 'id' for all elements. You can modify those as per your need.
This is the script
<script>
function confirm()
{
var nopilers, nochisels,nosaw, total;
nopilers=document.getElementById("noofpliers").value;
if (nopilers == "")
{
alert("Field is be empty or invalid");
return false;
}
nochisels=document.getElementById("noofchisels").value;
if (nochisels == "")
{
alert("Field is be empty or invalid");
return false;
}
nosaw=document.getElementById("saw").value;
if (nosaw == "")
{
alert("Field is be empty or invalid");
return false;
}
total=(nopilers+nochisels+nosaw)*1.07;
var retVal = confirm("The total cost of your order is : "+total+"Do you want to submit ?");
if( retVal == true )
{
document.write (" User wants to continue!!");
return true;
}
else{
document.write ("User does not want to continue!");
return false;
}
}
</script>
----------------------------------------
The modified html with script
----------------------------------------
<!DOCTYPE html>
<html>
<head>
<title>l2p3.html</title>
<script>
function confirm()
{
var nopilers, nochisels,nosaw, total;
nopilers=document.getElementById("noofpliers").value;
if (nopilers == "")
{
alert("Field is be empty or invalid");
return false;
}
nochisels=document.getElementById("noofchisels").value;
if (nochisels == "")
{
alert("Field is be empty or invalid");
return false;
}
nosaw=document.getElementById("saw").value;
if (nosaw == "")
{
alert("Field is be empty or invalid");
return false;
}
total=(nopilers+nochisels+nosaw)*1.07;
var retVal = confirm("The total cost of your order is : "+total+"Do you want to submit ?");
if( retVal == true )
{
document.write (" User wants to continue!!");
return true;
}
else{
document.write ("User does not want to continue!");
return false;
}
}
</script>
</head>
<body>
<h1 align = "center"> Customers Order Form</h1>
</br>
</br>
<form action ="/formtest.php" id="formtest" method="post">
<label for="lblitems" >These items are available : </label> (1) pliers (2) Chisels (3) saw</br></br>
<label for ="lblpliers" > Number of pliers </label> <input type="number" name="noofpliers" value="" id="noofpliers"></br></br>
<label for = "lblChisels" > Number of chisels </label> <input type="number" name="noofchisels" value="" id="noofchisels"></br></br>
<label for = "lblsaw" id="lblitems"> Number of Saws </label> <input type="number" name="saw" value="" id="saw"></br></br>
<label for = "lblCcustomer"> Customers Name: </label> <input type="text" name="customername" value=" " id="customername"></br>
</br>
<label for = "lblShipping">Customers Shipping Address: </label> <textarea name = "shippingaddress" id="shippingaddress" value = "" rows="4" cols="50"></textarea>
</br>
</br
<label for = "lblPayment">Customers Payment Method:--<label> </br> <input type="radio" name="payment" value="Visa" checked> Visa<br>
<input type="radio" name="payment" value="MasterCard"> MasterCard<br>
<input type="radio" name="payment" value="American Express"> American Express
</br>
</br>
</br>
<center>
<input type="submit" value="Submit"></center>
</form>
</body>
</html>
------------------------------------------------------------------------------------
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.