0

我试图将来自用户的 html 表单中的输入添加到一个表格中，该表格将同一页面中所有产品的总价格相加，所有这些都无需重新加载。

这是我的 html 表单和表格代码

先感谢您

<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>
4

2 回答 2

3

这是对您所拥有的工作的简单更新。您的部分问题是避免重新加载页面，因此您会注意到 FORM 不再执行 POST 操作，并且您的 SUBMIT BUTTON 不再是输入，而是具有 onClick 操作的标准按钮。这将允许在不离开页面的情况下执行所有操作。为了节省时间，我将结果添加到单独的表格中，您可以随意设置样式。

<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>

这是上述代码的 JS Fiddle 示例。

于 2013-10-31T05:45:50.657 回答
0 
<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>
于 2013-10-31T06:17:01.023 回答