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 に答える