javascript not validating input from form

Question

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>

dfsq · Accepted Answer · 2013-11-01 00:09:43Z

0

I can see another problem: you are not defining form variable. Try this:

function updateForm() {
    var form = document.getElementById('order'); // added
    fail = validateProduct(form.product.value);
    ...

http://jsfiddle.net/4ZZ7b/1/

answered Nov 1, 2013 at 0:09

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

scrowler · Accepted Answer · 2013-10-31 23:58:18Z

0

You haven't closed your function updateForm (or more specifically, you haven't closed your else on if(fail == "") - which ends up using the function close instead.

answered Oct 31, 2013 at 23:58

scrowler

24.4k10 gold badges67 silver badges99 bronze badges

1 Comment

user2788650 Over a year ago

So I basically have to put my else inside the if braces?

Collectives™ on Stack Overflow

javascript not validating input from form

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related