Question

我输入了整个计算。我有一个提交按钮，通过点击需要检索总和。它不起作用。我在JavaScript方面很陌生，所以我无法确定问题出在哪里。这是代码：

$('#home_price').submit(function(){
    var shutter_price, lights_price, socket_price, screen10_price, screen7_price, dimmer_price, x
    var total_price = 3000;
    shutter_price = ($('#shutter').val())*200;
    light_price = ($('#lights').val())*200;
    socket_price = ($('#socket').val())*200;
    screen10_price = ($('#screen10').val())*700;
    screen7_price = ($('#screen7').val())*200;
    dimmer_price = ($('#dimmer').val())*400;
    if($('#boiler').is(":checked")==true){
        total_price+=600;
        x+=1;
    }
    x+=($('#shutter').val())*2+($('#lights').val())+($('#socket').val());
    Math.floor(x);
    x+=1;
    total_price = total_price + shutter_price + light_price + socket_price + screen10_price      + screen7_price +           dimmer_price + x*400;
    $('#home_pricing').val()=total_price;
    if($('#home_pricing').val() < 6000)
        alert('the solution invalid');
    else
        alert(" total: " + $('#home_pricing').val());
    });
});

和一段HTML代码：

    <label for="screen7"> 7inch screen </label> 
    <input style="margin-right:70px" name="screen7" type="number" id="screen7"> <br><br> 
    <label for="dimmer"> dimmer</label> 
    <input style="margin-right:174px" name="dimmer" type="number" id="dimmer"> <br><br> 
    <label for="boiler"> bolier </label>
    <input style="margin-right:148px" type="checkbox" name="boiler" id="boiler" > <br><br> 
    <div>
        <input type="submit" name=" home_pricing " id="home_pricing" value=" calculate " >
    </div>
</form>

我尝试使用document.getelementbyid（＆＃39; one_of id＆＃39; s＆＃39;）。但是，一旦我在每个输入行中选择值，然后单击提交按钮，它就会再次跳转到窗口而没有任何值，并且不会打印任何内容。

Answer 1

将提交按钮的类型从“提交”更改为“按钮”。这样，点击提交不会重定向您。您需要做的设置值是为新按钮创建一个onclick事件。

不使用$('#home_price').submit()，而是使用calculate()，它会起作用。

Answer 2

提交表单时的默认行为是转到新页面。如果未指定新页面，则仅重新加载当前页面。您可以通过调用事件的preventDefault方法来阻止submit事件处理程序方法中的默认行为。为此，请为submit方法定义指定一个事件参数，然后调用preventDefault，如下所示：

$('#home_price').submit(function(event) {
    event.preventDefault();

    // Rest of your code here
    // ...

<强>更新您的代码中还有一些明显的错误。 Math.floor method不会修改传递给它的变量，它会返回一个整数值。改变这一行：

Math.floor(x);

到这个

x = Math.floor(x);

将jQuery val() method放在作业的左侧确实可以做任何事情。但是，您可以将值传递给val()，它将设置新值。改变这一行：

$('#home_pricing').val()=total_price;

到此：

$('#home_pricing').val(total_price);

尝试使用JavaScript中的jQuery制作定价列表

2 个答案: