Im trying to make the input from the user in a html form be added to a table that adds up the total price of all the products in the same page all of this without reloading.
here is my html form and table code
Thank you in advance
<h1>Instructions</h1>
<section>
<p>Please enter the desired product/services in the following table to create an order.</p>
<section style="width:300px; margin-left:20px">
<form action="" name="order" method="POST" autoplete="off">
<table width="300" border="0" cellspacing="5" cellpadding="2">
<tr>
<td>
<label for="product">Product:</label>
</td>
<td>
<input name="product" id="product" required pattern="[a-zA-Z ]*$" title="Please enter only alphabetic characters" type="text" placeholder="Product name" size="28" />
</td>
</tr>
<tr>
<td>
<label for="quantity">Quantity:</label>
</td>
<td>
<input name="quantity" id="quantity" required type="number" title="Enter item quantity" placeholder="Product quantity" width="196px" />
</td>
</tr>
<tr>
<td>
<label for="price">Price:</label>
</td>
<td>
<input name="price" id="price" required pattern="[0-9]" title="Please enter only numeric characters" placeholder="Product price" size="28" />
</td>
</tr>
</table>
<br>
<div id="buttons">
<input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset">
<input type="submit" name="submit" id="submitbtn" class="submitbtn" tabindex="7" value="Submit this!" onclick="">
<br style="clear:both;">
</div>
</form>
</section>
</section>
<table width="416" border="0" cellspacing="5" cellpadding="2">
<tr>
<th width="115" scope="col">Products</th>
<th width="112" scope="col">Quantity</th>
<th width="92" scope="col">Price</th>
<th width="56"></th>
</tr>
<tr>
<td scope="col"> </th>
<td scope="col">
</th>
<td scope="col"> </th>
<th>Total</th>
</tr>
</table>
Im trying to make the input from the user in a html form be added to a table that adds up the total price of all the products in the same page all of this without reloading.
here is my html form and table code
Thank you in advance
<h1>Instructions</h1>
<section>
<p>Please enter the desired product/services in the following table to create an order.</p>
<section style="width:300px; margin-left:20px">
<form action="" name="order" method="POST" autoplete="off">
<table width="300" border="0" cellspacing="5" cellpadding="2">
<tr>
<td>
<label for="product">Product:</label>
</td>
<td>
<input name="product" id="product" required pattern="[a-zA-Z ]*$" title="Please enter only alphabetic characters" type="text" placeholder="Product name" size="28" />
</td>
</tr>
<tr>
<td>
<label for="quantity">Quantity:</label>
</td>
<td>
<input name="quantity" id="quantity" required type="number" title="Enter item quantity" placeholder="Product quantity" width="196px" />
</td>
</tr>
<tr>
<td>
<label for="price">Price:</label>
</td>
<td>
<input name="price" id="price" required pattern="[0-9]" title="Please enter only numeric characters" placeholder="Product price" size="28" />
</td>
</tr>
</table>
<br>
<div id="buttons">
<input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset">
<input type="submit" name="submit" id="submitbtn" class="submitbtn" tabindex="7" value="Submit this!" onclick="">
<br style="clear:both;">
</div>
</form>
</section>
</section>
<table width="416" border="0" cellspacing="5" cellpadding="2">
<tr>
<th width="115" scope="col">Products</th>
<th width="112" scope="col">Quantity</th>
<th width="92" scope="col">Price</th>
<th width="56"></th>
</tr>
<tr>
<td scope="col"> </th>
<td scope="col">
</th>
<td scope="col"> </th>
<th>Total</th>
</tr>
</table>
This is a simple update to what you have that works. Part of your question was to avoid page reloading, so you will notice the FORM no longer does a POST action and your SUBMIT BUTTON is no longer an input but a standard button with an onClick action. This will allow everything to execute without navigating away from the page. For the sake of time I put the results addition in a separate table, feel free to style how you wish.
<html>
<head>
<title>Order</title>
<script type="text/javascript">
var qtyTotal = 0;
var priceTotal = 0;
function updateForm() {
var product = document.getElementById("product").value;
var qty = document.getElementById("quantity").value;
qtyTotal = qtyTotal + parseInt(qty);
document.getElementById("qtyTotals").innerHTML=qtyTotal;
var price = document.getElementById("price").value;
priceTotal = priceTotal + parseInt(price);
document.getElementById("priceTotals").innerHTML=priceTotal;
var table=document.getElementById("results");
var row=table.insertRow(-1);
var cell1=row.insertCell(0);
var cell2=row.insertCell(1);
var cell3=row.insertCell(2);
cell1.innerHTML=product;
cell2.innerHTML=qty;
cell3.innerHTML=price;
}
</script>
</head>
<body>
<form name="order" id="order">
<table>
<tr>
<td>
<label for="product">Product:</label>
</td>
<td>
<input id="product" name="product" title="Please enter only alphabetic characters" type="text" size="28" />
</td>
</tr>
<tr>
<td>
<label for="quantity">Quantity:</label>
</td>
<td>
<input id="quantity" name="quantity" title="Enter item quantity" width="196px" />
</td>
</tr>
<tr>
<td>
<label for="price">Price:</label>
</td>
<td>
<input id="price" name="price" title="Please enter only numeric characters" size="28" />
</td>
</tr>
</table>
<input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset" />
<button type="button" onClick="updateForm();"/>Add To Table</button>
</form>
<br>
<table id="results" width="360">
<thead>
<tr>
<th scope="col" width="120">Products</th>
<th scope="col" width="120">Quantity</th>
<th scope="col" width="120">Price</th>
</tr>
</thead>
</table>
<table id="resultTotals" width="360">
<tr>
<td scope="col" width="120">Totals</td>
<td scope="col" width="120"><div id="qtyTotals"></div></td>
<td scope="col" width="120"><div id="priceTotals"></div></td>
</tr>
</table>
</body></html>
Here is JS Fiddle Example of above code.
<section>
<p>Please enter the desired product/services in the following table to create an order.</p>
<section style="width:300px; margin-left:20px">
<form action="" name="order" method="POST" autoplete="off">
<table id="cart" width="300" border="0" cellspacing="5" cellpadding="2">
<tr>
<td>
<label for="product">Product:</label>
</td>
<td>
<input name="product" required pattern="[a-zA-Z ]*$" title="Please enter only alphabetic characters" type="text" placeholder="Product name" size="28" />
</td>
</tr>
<tr>
<td>
<label for="quantity">Quantity:</label>
</td>
<td>
<input name="quantity" required type="number" title="Enter item quantity" placeholder="Product quantity" width="196px" />
</td>
</tr>
<tr>
<td>
<label for="price">Price:</label>
</td>
<td>
<input name="price" required pattern="[0-9]" title="Please enter only numeric characters" placeholder="Product price" size="28" />
</td>
</tr>
</table>
<br>
<div id="buttons">
<input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset">
<input type="submit" name="submit" id="submitbtn" class="submitbtn" tabindex="7" value="Submit this!" onclick="">
<br style="clear:both;">
</div>
</form>
</section>
</section>
<table width="416" border="0" cellspacing="5" cellpadding="2" id="cart">
<tr>
<th width="115" scope="col">Products</th>
<th width="112" scope="col">Quantity</th>
<th width="92" scope="col">Price</th>
<th width="56"></th>
</tr>
<tr>
<td id="items">
</td>
</tr>
<tr>
<td scope="col"> </th>
<td scope="col">
</th>
<td scope="col"> </th>
<th>Total</th>
<td id="total">0</td>
</tr>
</table>
<script>
$(document).ready(function(){
var form = document.order;
var $checkout = $('#cart');
// Listen for form submit
$(form).on('submit', function(e){
// Prevent browser from sending form
e.preventDefault();
// this is a row thats nt yet attached to the document
var $row = $('<tr class="item">');
/*
* Loop through fields and add 'product','quantity','price'
* to $row. we store the data on the node as well
*/
$.each(['product','quantity','price'],function(index, key){
var $td = $('<td>');
var value = form[key].value;
$td.addClass(key).text(value);
$row.data(key, value);
$row.append($td);
});
// Attach the $row to the document
$('#items').append($row);
// Update the totals
$checkout.trigger('change');
});
// Update totals when cart changes
$checkout.on('change',function(){
var total = 0;
$(this).find('.item').each(function(){
var quant = parseFloat($(this).data('quantity'));
var price = parseFloat($(this).data('price'));
total = total + (quant * price);
});
$('#total').text(total);
});
});
</script>