0

内部フォームにjQueryの合計フォームデータを持たせようとしています。私はjsfiddle.netで現在のコードを使用しており、jQuery 1.6.4で動作しました。

複数の異なる jQuery バージョンを試しました。しかし、私は一般的にjQuery/javascriptに慣れていないので、ここからどこに進むべきかわかりません。

どんな助けでも大歓迎です！

<script type="text/javascript" src="jquery-1.6.4.js">
    var $form = $('#apple-order'),
        $summands = $form.find('.apple'),
        $sumDisplay = $('#total');

    $form.delegate('.apple', 'change', function ()
    {
        var sum = 0;
        $summands.each(function ()
        {
            var value = Number($(this).val());
            if (!isNaN(value)) sum += value;
        });

        $sumDisplay.text(sum);
    });
</script>


<table width="300" border="0" align="center" cellpadding="0" cellspacing="1" id="apple-order">
    <tr>
        <td>
            <form name="apple" method="post" action="insert.php">

                <tr>
                    <td colspan="3" align="center"><strong>Caramel Apple Order Form</strong></td>
                </tr>

                <tr>
                    <td>Employee Name</td>
                    <td>: </td>
                    <td><input name="name" type="text"></td>
                </tr>

                <tr>
                    <td>Plain Caramel Apple</td>
                    <td>: </td>
                    <td><input name="plain" type="text" class="apple"></td>
                </tr>

                <tr>
                    <td>w/ Snickers</td>
                    <td>: </td>
                    <td><input name="snickers" type="text" class="apple"></td>
                </tr>

                <tr>
                    <td>w/ Butterfinger</td>
                    <td>: </td>
                    <td><input name="butter" type="text" class="apple"></td>
                </tr>

                <tr>
                    <td>w/ Mini M&Ms</td>
                    <td>: </td>
                    <td><input name="mini" type="text" class="apple"></td>
                </tr>

                <tr>
                    <td>w/ Pretzels</td>
                    <td>: </td>
                    <td><input name="pretzel" type="text" class="apple"></td>
                </tr>

                <tr>
                    <td colspan="3" align="center"><strong>Apples w/ Toppings come with Chocolate Drizzle</strong></td>
                </tr>

                <tr>
                    <td colspan="3" align="center">Total: <span id="total"></span></td>
                </tr>

                 <tr>
                    <td colspan="3" align="center"><input type="submit" value="SUBMIT">    </td>
                </tr>


    </tr>
</table>
4

4 に答える 4

2

要素が存在する前に要素にアクセスしようとしています。コードを DOM 対応ハンドラーでラップします。また、属性を持つscript要素がある場合src、コードを入れることはできません。script次の 2 つのタグが必要です。

<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script>
$(function () {
    var $form = $('#apple-order'),

    // etc

});
</script>

デフォルトでは、jsfiddle はコードを onLoad ハンドラーでラップするため、混乱する可能性があります。

于 2013-10-15T20:44:44.800 に答える
0

最初にすべてのライブラリを宣言します

<script type="text/javascript" language="javascript" src="jquery-1.6.4.js"></script>
...

その後、別の場所でコーディングを開始します

<script>
// do something
</script>
于 2013-10-15T20:49:04.460 に答える