Add input from a form to a table in the same page without reloading

Question

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" autocomplete="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">&nbsp;</th>
            <td scope="col">
                </th>
                <td scope="col">&nbsp;</th>
                    <th>Total</th>
    </tr>
</table>

I have not yet started doing any scripting as I have no clue how to do it. I can use jquery or java — Javier Lopez, Oct 31 '13 at 05:06
You mean Javascript? Java is something else entirely. You also need to prepare your table better, put ID tags/name on the elements that you'll need to access for updating so that you'll be able to more easily access them. — tremor, Oct 31 '13 at 05:09
Yes I could javascript or jquery. So basically erase the name of the input elements on my table? — Javier Lopez, Oct 31 '13 at 05:11
@JavierLopez - entirely the opposite, your elements that will be read/updated, need a method of being "seen" by the Javascript. I'll put together an example as soon as I can. In the meantime, some of your HTML is broken as well you might want to recheck it. — tremor, Oct 31 '13 at 05:25
I have already id every single input the user will be typing — Javier Lopez, Oct 31 '13 at 05:36
`name` and `id` are quite different. http://stackoverflow.com/questions/7470268/html-input-name-vs-id — jasonscript, Oct 31 '13 at 05:38
Yes I already had an input name for every input all i had to do was to create an id for each. I will update my code above — Javier Lopez, Oct 31 '13 at 05:41
@JavierLopez I've posted a partial answer that cleans up your HTML and creates an initial javascript function to update your table with the items. — tremor, Oct 31 '13 at 05:47
@JavierLopez I've updated my answer to include the addition of your totals, this should be a complete answer for you to use and work with. — tremor, Oct 31 '13 at 06:08

tremor · Accepted Answer · 2013-10-31T06:07:38.767

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.

it worked perfectly fine. I added a subtotal variable and output it in the cell4. I now have to do a total which has to be written at the bottom of the table. Thank you :) — Javier Lopez, Oct 31 '13 at 06:10
How can I declare priceTotal as a double so it takes decimals, cause as of now it only outputs integers. — Javier Lopez, Oct 31 '13 at 06:33

score 0 · Answer 2 · answered Oct 31 '13 at 06:17

<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" autocomplete="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">&nbsp;</th>
            <td scope="col">
                </th>
                <td scope="col">&nbsp;</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>

it doesn't output the total, it just stays on zero... any suggestions? — Javier Lopez, Oct 31 '13 at 06:44

Add input from a form to a table in the same page without reloading

2 Answers2