HTML5 help : I have done up to this : <html> <head> <title>Shopping Order Form</
ID: 3586673 • Letter: H
Question
HTML5 help :
I have done up to this :
<html>
<head>
<title>Shopping Order Form</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table, td, th {
border: 1px solid black;
}
img
{
height: 100px;
width: 80px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#select_all').on('click',function(){
if(this.checked){
$('.checkbox').each(function(){
this.checked = true;
});
}else{
$('.checkbox').each(function(){
this.checked = false;
});
}
});
$('.checkbox').on('click',function(){
if($('.checkbox:checked').length == $('.checkbox').length){
$('#select_all').prop('checked',true);
}else{
$('#select_all').prop('checked',false);
}
});
});
</script>
</head>
<body bgcolor ="#cceeff">
<form action="lab2_result.html">
<table width="600px" bgcolor="white" align="center">
<caption><h1>Shopping Order Form</h1></caption>
<tr>
<td colspan="4" align="middle" height="50"><h2>Super Sales Bay</h2></td>
</tr>
<tr>
<td align="middle" width="50%">Product Name</td>
<td align="middle">Picture</td>
<td align="middle">Price</td>
<td align="middle"><input type="checkbox" id="select_all" />Add Item</td>
</tr>
<tr>
<td align="middle" height="70" >Apple iPad Air 2</td>
<td align="middle"><img src="lab2_images/apple_ipad_air_2.jpg" alt="Apple iPad Air 2" /></td>
<td align="middle">$353.99</td>
<td align="middle"><input type="checkbox" class="checkbox" value="apple ipad air 2"></td>
</tr>
<tr>
<td align="middle" height="70" >Apple iPad Air</td>
<td align="middle"><img src="lab2_images/apple_ipad_air.jpg" alt="Apple iPad Air" /></td>
<td align="middle">$299.99</td>
<td align="middle"><input type="checkbox" class="checkbox" value="apple ipad air"></td>
</tr>
<tr>
<td align="middle" height="70" >Samsung Galaxy S7</td>
<td align="middle"><img src="lab2_images/samsung_galaxy_s7.jpg" alt="Samsung Galaxy S7" /></td>
<td align="middle">$599.99</td>
<td align="middle"><input type="checkbox" class="checkbox" value="samsung galaxy s7"></td>
</tr>
<tr>
<td align="middle" height="70" >Samsung Gear VR</td>
<td align="middle"><img src="lab2_images/samsung_gear_VR.jpg" alt="Samsung Gear VR" /></td>
<td align="middle">$59.99</td>
<td align="middle"><input type="checkbox" class="checkbox" value="samsung gear vr"></td>
</tr>
<tr>
<td align="middle" height="70" >ASUS Zenbook UX303UB</td>
<td align="middle"><img src="lab2_images/ASUS_ZenBook_UX303UB.jpg" alt="ASUS Zenbook UX303UB" /></td>
<td align="middle">$1,169.99</td>
<td align="middle"><input type="checkbox" class="checkbox" value="asus zenbook ux303ub"></td>
</tr>
</table>
<table width="600px" bgcolor="white" align="center">
<tr>
<td colspan="4" align="middle">Shipping Address</td>
</tr>
<tr>
<td><br>
Name:<input type="text" name="usrname" maxlength="38" size="38" required><br></br>
Address:<br><textarea rows="4" cols="35" required></textarea><br></br>
Email:<input type="email" name="email" maxlength="38" size="38" required><br></br>
</td>
</tr>
</table>
<table width="600px" bgcolor="white" align="center">
<tr>
<td colspan="4">
Final Amount: <input type="text" name="final amount" readonly>
</td>
</tr>
</table>
<table width="600px" bgcolor="white" align="center">
<tr>
<td colspan="4">
Shipping Methods:
<select name="shippingmethods">
<option value="1">USPS Standard $3.00</option>
<option value="2">USPS Insured $5.00</option>
<option value="3">USPS Priority $9.00</option>
<option value="4">UPS 3-5 Days $11.00</option>
<option value="5">UPS 2 Days $15.00</option>
<option value="6">UPS Overnight $20.00</option>
</select>
</td>
</tr>
</table>
<table width="600px" bgcolor="white" align="center">
<tr>
<td colspan="4" colspan="4" align="middle">
<input type="submit" name="submit" id="submit" value="Submit" />
<input type="reset" name="clear" value="Clear" />
</td>
</tr>
</table>
</form>
</body>
</html>
I am stuck in the part where it should display the final amount section. ( please check the other codes as well )
Thank you!!
. Using JavaScript, make the following changes to your webpage: All checkboxes must be checked when the Add Item checkbox is checked, and unchecked if it is not. Product Name Picture | Price Add Item Add a “Final Amount" label and text field. The Final Amount text field is "Readonly" · Final Amount $0.00 Shipping Method: USPS Standard $3.00 v SubmitClear When you select an item, the price of the selected item should be displayed in the Final Amount text field. If you select more than one item, sum the prices of all items selected and display the final amount. If all items are selected using the Add Item checkbox, sum all prices and display the final amount. .When the submit button is pressed, your code should check that at least one checkbox is checked. If not, display an alert. If one or more items are checked, display an alert asking: "Are you ready to check out?" When the clear button is pressed, display an alert asking: "Do you wish to clear your cart?"Explanation / Answer
Please copy the below code into your html page
<html>
<head>
<title>Shopping Order Form</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table, td, th {
border: 1px solid black;
}
img
{
height: 100px;
width: 80px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var finalAmount=0.0;
$('#select_all').on('click',function(){
if(this.checked){
$('.checkbox').each(function(){
this.checked = true;
var val = $(this).val();
val=val.replace(/s+/g, '');
var amount = $('#'+val).val();
//alert(amount);
finalAmount += parseFloat(amount);
$('#finalAmount').val(finalAmount);
});
}else{
$('.checkbox').each(function(){
this.checked = false;
var val = $(this).val();
val=val.replace(/s+/g, '');
var amount = $('#'+val).val();
finalAmount -= parseFloat(amount);
$('#finalAmount').val(finalAmount);
});
}
});
$('.checkbox').on('click',function(){
var val = $(this).val();
val=val.replace(/s+/g, '');
if($(this).prop('checked')){
//alert($('#'+val).val());
var amount = $('#'+val).val();
//alert(amount);
finalAmount += parseFloat(amount);
$('#finalAmount').val(finalAmount);
}else{
var amount = $('#'+val).val();
finalAmount -= parseFloat(amount);
$('#finalAmount').val(finalAmount);
}
if($('.checkbox:checked').length == $('.checkbox').length){
$('#select_all').prop('checked',true);
}else{
$('#select_all').prop('checked',false);
}
});
$('#submit').on('click',function(){
//alert($('.checkbox:checked').length);
if($('.checkbox:checked').length <= 0){
alert("you need to check atleast one checkbox");
e.preventDefault();
}else {
if(!confirm("Are you ready to check out?")) {
e.preventDefault();
}
}
});
$('#clear').on('click',function(){
if(confirm("Do you wish to clear your cart?")) {
$('#cartForm').trigger("reset");
}
});
});
</script>
</head>
<body bgcolor ="#cceeff">
<form action="lab2_result.html" id="cartForm">
<table width="600px" bgcolor="white" align="center">
<caption><h1>Shopping Order Form</h1></caption>
<tr>
<td colspan="4" align="middle" height="50"><h2>Super Sales Bay</h2></td>
</tr>
<tr>
<td align="middle" width="50%">Product Name</td>
<td align="middle">Picture</td>
<td align="middle">Price</td>
<td align="middle"><input type="checkbox" id="select_all" />Add Item</td>
</tr>
<tr>
<td align="middle" height="70" >Apple iPad Air 2</td>
<td align="middle"><img src="lab2_images/apple_ipad_air_2.jpg" alt="Apple iPad Air 2" /></td>
<td align="middle">$353.99<input type="hidden" id="appleipadair2" value="353.99"/></td>
<td align="middle"><input type="checkbox" class="checkbox" value="apple ipad air 2"></td>
</tr>
<tr>
<td align="middle" height="70" >Apple iPad Air</td>
<td align="middle"><img src="lab2_images/apple_ipad_air.jpg" alt="Apple iPad Air" /></td>
<td align="middle">$299.99<input type="hidden" id="appleipadair" value="299.99"/></td>
<td align="middle"><input type="checkbox" class="checkbox" value="apple ipad air"></td>
</tr>
<tr>
<td align="middle" height="70" >Samsung Galaxy S7</td>
<td align="middle"><img src="lab2_images/samsung_galaxy_s7.jpg" alt="Samsung Galaxy S7" /></td>
<td align="middle">$599.99<input type="hidden" id="samsunggalaxys7" value="599.99"/></td>
<td align="middle"><input type="checkbox" class="checkbox" value="samsung galaxy s7"></td>
</tr>
<tr>
<td align="middle" height="70" >Samsung Gear VR</td>
<td align="middle"><img src="lab2_images/samsung_gear_VR.jpg" alt="Samsung Gear VR" /></td>
<td align="middle">$59.99<input type="hidden" id="samsunggearvr" value="59.99"/></td>
<td align="middle"><input type="checkbox" class="checkbox" value="samsung gear vr"></td>
</tr>
<tr>
<td align="middle" height="70" >ASUS Zenbook UX303UB</td>
<td align="middle"><img src="lab2_images/ASUS_ZenBook_UX303UB.jpg" alt="ASUS Zenbook UX303UB" /></td>
<td align="middle">$1,169.99<input type="hidden" id="asuszenbookux303ub" value="1169.99"/></td>
<td align="middle"><input type="checkbox" class="checkbox" value="asus zenbook ux303ub"></td>
</tr>
</table>
<table width="600px" bgcolor="white" align="center">
<tr>
<td colspan="4" align="middle">Shipping Address</td>
</tr>
<tr>
<td><br>
Name:<input type="text" name="usrname" maxlength="38" size="38" required><br></br>
Address:<br><textarea rows="4" cols="35" required></textarea><br></br>
Email:<input type="email" name="email" maxlength="38" size="38" required><br></br>
</td>
</tr>
</table>
<table width="600px" bgcolor="white" align="center">
<tr>
<td colspan="4">
Final Amount: <input type="text" name="final amount" id="finalAmount" readonly>
</td>
</tr>
</table>
<table width="600px" bgcolor="white" align="center">
<tr>
<td colspan="4">
Shipping Methods:
<select name="shippingmethods">
<option value="1">USPS Standard $3.00</option>
<option value="2">USPS Insured $5.00</option>
<option value="3">USPS Priority $9.00</option>
<option value="4">UPS 3-5 Days $11.00</option>
<option value="5">UPS 2 Days $15.00</option>
<option value="6">UPS Overnight $20.00</option>
</select>
</td>
</tr>
</table>
<table width="600px" bgcolor="white" align="center">
<tr>
<td colspan="4" colspan="4" align="middle">
<input type="submit" name="submit" id="submit" value="Submit" />
<input type="button" name="clear" id="clear" value="Clear" />
</td>
</tr>
</table>
</form>
</body>
</html>
Thank you......All the best
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.