设置表单值时,JQuery val()会引发运行时错误

时间:2012-07-08 12:27:57

标签: javascript jquery asp.net-mvc-3 forms

我是Javascript / JQuery的新手,如果我遗漏了一些简单的东西,请道歉。我正在尝试按一个按钮来计算数量和数量的总和。单价,并用结果填充总字段。这是在ASP.NET MVC3中使用VS2010完成的。

我的代码似乎提取了SpoilageQuantity和SpoilageUnitPrice的值,但是在设置SpoilageTotalPrice的值时失败了。错误说我正在尝试为函数结果赋值,但我的理解是val()可用于获取和设置表单字段值。更正或建议?

VS2010观点:

<div class="editor-label">
    @Html.LabelFor(model => model.SpoilageQuantity)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.SpoilageQuantity)
    @Html.ValidationMessageFor(model => model.SpoilageQuantity)
</div>

<div class="editor-label">
    @Html.LabelFor(model => model.SpoilageUnitPrice)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.SpoilageUnitPrice)
    @Html.ValidationMessageFor(model => model.SpoilageUnitPrice)
</div>

<div class="editor-label">
    @Html.LabelFor(model => model.SpoilageTotalPrice)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.SpoilageTotalPrice)
    @Html.ValidationMessageFor(model => model.SpoilageTotalPrice)
    <input type="button" value="Calculate" onclick="calculateTotal()" />
</div>

JS档案:

function calculateTotal() {
// calculate total spoilage price from unit price and quantity
var totalprice = $('#SpoilageQuantity').val() * $('#SpoilageUnitPrice').val();
totalprice = totalprice.toFixed(2);

$('#SpoilageTotalPrice').val(totalprice);
}

呈现HTML:

<div class="editor-label">
        <label for="SpoilageQuantity">Item Quantity</label>
    </div>
    <div class="editor-field">
        <input class="text-box single-line" data-val="true" data-val-number="The field Item Quantity must be a number." data-val-required="Quantity of item lost is required." id="SpoilageQuantity" name="SpoilageQuantity" type="text" value="0.00" />
        <span class="field-validation-valid" data-valmsg-for="SpoilageQuantity" data-valmsg-replace="true"></span>
    </div>

    <div class="editor-label">
        <label for="SpoilageUnitPrice">Unit Price</label>
    </div>
    <div class="editor-field">
        <input class="text-box single-line" data-val="true" data-val-number="The field Unit Price must be a number." data-val-required="Unit price is required." id="SpoilageUnitPrice" name="SpoilageUnitPrice" type="text" value="0.00" />
        <span class="field-validation-valid" data-valmsg-for="SpoilageUnitPrice" data-valmsg-replace="true"></span>
    </div>

    <div class="editor-label">
        <label for="SpoilageTotalPrice">Total Price</label>
    </div>
    <div class="editor-field">
        <input class="text-box single-line" data-val="true" data-val-number="The field Total Price must be a number." data-val-required="The Total Price field is required." id="SpoilageTotalPrice" name="SpoilageTotalPrice" type="text" value="0.00" />
        <span class="field-validation-valid" data-valmsg-for="SpoilageTotalPrice" data-valmsg-replace="true"></span>
        <input type="button" value="Calculate" onclick="calculateTotal()" />
    </div>

错误讯息:

Microsoft JScript runtime error: Cannot assign to a function result

编辑:整个js文件:

/*  Copyright 2012 Tom Barrett

This file is part of PFC Logs.

PFC Logs is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

PFC Logs is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with PFC Logs.  If not, see <http://www.gnu.org/licenses/>.
*/

function autoFocus() {
    // Auto-focus on the first text field upon page load.
    $("input[type=text]").first().focus();
}

function calculateTotal() {
    // calculate total from quantity & unit price
    var totalprice = $('#SpoilageQuantity').val() * $('#SpoilageUnitPrice').val();
    totalprice = totalprice.toFixed(2);
    $("#SpoilageTotalPrice").val(totalprice);
}

1 个答案:

答案 0 :(得分:0)

我不知道技术性......但我也遇到过这个问题。如果我的函数是在一个单独的js文件中,我链接到我的标签jquery(或Jscript)就找不到这些元素。如果我在标签中包含脚本,则一切正常。