Hi guys I have a form that posts the input from the user into a table into the same page without reloading. I have already finished the easy part which is passing the input to the table and had started doing the validation but for some reason it doesn't seem to work. Please check out my code below.
Thank you in advance
<script type="text/javascript">
var qtyTotal = 0;
var priceTotal = 0;
var totalCart = 0;
function updateForm() {
fail = validateProduct(form.product.value)
fail += validateQuantity(form.quantity.value)
fail += validatePrice(form.price.value)
if (fail == ""){
var product = document.getElementById("product").value;
var qty = document.getElementById("quantity").value;
qtyTotal = qtyTotal + parseFloat(qty);
var price = document.getElementById("price").value;
priceTotal = (qty * parseFloat(price)).toFixed(2);
totalCart = totalCart + parseFloat(priceTotal);
document.getElementById("totalCart").innerHTML="$"+totalCart;
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);
var cell4=row.insertCell(3);
cell1.innerHTML=product;
cell2.innerHTML=qty;
cell3.innerHTML="$"+price;
cell4.innerHTML="$"+priceTotal;
}
else{
document.getElementById('errors').innerHTML = fail;}
return false
}
function validateProduct(field) {
if (field == "") return "No product name was entered.<br/>"
else if (field.length < 3) return "Please enter a valid name.<br/>"
return ""
}
function validateQuantity(field) {
if (field == "") return "No quantity was entered.<br/>"
else if (!/[0-9]*$/.test(field)) return "Quantity can only have numerical values.<br/>"
return ""
}
function validatePrice(field) {
if (field == "") return "No city was entered.<br/>"
else if (field.length < 2) return "Please enter a valid price with two decimal points.<br/>"
else if (!/[0-9]+(\.[0-9][0-9]?)?/.test(field)) return "Price can only have numerical values with two decimal points.<br/>"
return ""
}
</script>
<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">
<div id="errors"></div>
<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" value="Reset" />
<input type="button" onClick="updateForm();" value="Add to Cart"/>
</form>
</section>
</section>
<section>
<br>
<p id="header">INVOICE</p>
<table id="results" width="599">
<thead>
<tr>
<th scope="col" width="96">Products</th>
<th scope="col" width="94">Quantity</th>
<th scope="col" width="98">Unit Cost</th>
<th scope="col" width="52">Price</th>
</tr>
</thead>
</table>
<table id="resultTotals" width="599">
<tr>
<td colspan="2"></td>
<td style="padding-left:5px" bgcolor="#CCCCCC" scope="col" width="161">Total</td>
<td style="padding-left:5px" bgcolor="#CCCCCC" scope="col" width="91"><div id="totalCart"></div></td>
</tr>
</table>
</section>