javascript - 尝试在 JavaScript 中使用 jQuery 制作价格表

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(' one_of the id's').value 做同样的事情但是一旦我在每个输入行中选择值，然后单击提交按钮，它就会再次跳转到没有值的窗口，并且不会打印任何内容。

Answer 1

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

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