e.preventDefault不会停止表单上的重定向

Question

我知道过去曾被问过无数次-尽管我浏览了其中的4个或5个线程，但对于我的生命来说，我无法弄清楚是什么原因导致表单重定向！ 请帮忙！

这是我的表单提交功能：每当我从元素中选择一个选项时，该表单就会触发并（成功）发布到form.php，尽管即使我包含了event.preventDefault（），它也会重定向。 你能发现任何可能阻止这种情况的东西吗？

<script type="text/javascript">
$(document).ready(function(){
   $('#quote_form').submit(function(e) {
    e.preventDefault();
    select();
});

});

function select(){
    error(0);

    $.ajax({
        type: "POST",
        url: "form.php",
        data: $('#quote_form').serialize(),
        dataType: "json",
        cache: false,
        success: function(data)
        {
            $("#graph_var_1").html(data.message1);
            $("#graph_var_2").html(data.message2);
            $("#graph_var_3").html(data.message3);
            $("#graph_var_4").html(data.message4);
        }

    });

}


function result(act,txt)
{
    if(txt) $('#subcategory').html(txt);
}
</script>

编辑：我在发布之前（想使它正常工作）在搞乱它，并且一定错过了（e）（事件）不一致的地方-尽管我把它改回了，但仍然没有运气。 有任何想法吗？

HTML：

<form id="quote_form" name="quote_form" method="post" action="form.php">
                    <label>Quarterly Power Bill Value</label>
                    <select name="bill_value" id="bill_value" size='1' onChange='this.form.submit();'>
                        <option value="200">200</option>
                        <option value="250">250</option>
                        <option value="300">300</option>
                        <option value="350">350</option>
                        <option value="400">400</option>
                        <option value="450">450</option>
                        <option value="500">500</option>
                        <option value="550">550</option>
                        <option value="600">600</option>
                        <option value="650">650</option>
                        <option value="700">700</option>
                        <option value="750">750</option>
                        <option value="800">800</option>
                        <option value="850">850</option>
                        <option value="900">900</option>
                        <option value="950">950</option>
                        <option value="1000">1000</option>
                        <option value="1050">1050</option>
                        <option value="1100">1100</option>
                        <option value="1150">1150</option>
                        <option value="1200">1200</option>
                        <option value="1250">1250</option>
                        <option value="1300">1300</option>
                        <option value="1350">1350</option>
                        <option value="1400">1400</option>
                        <option value="1450">1450</option>
                        <option value="1500">1500</option>
                        <option value="1550">1550</option>
                        <option value="1600">1600</option>
                        <option value="1650">1650</option>
                        <option value="1700">1700</option>
                        <option value="1750">1750</option>
                        <option value="1800">1800</option>
                        <option value="1850">1850</option>
                        <option value="1900">1900</option>
                        <option value="1950">1950</option>
                        <option value="2000">2000</option>
                        <option value="2050">2050</option>
                        <option value="2100">2100</option>
                        <option value="2150">2150</option>
                        <option value="2200">2200</option>
                        <option value="2250">2250</option>
                        <option value="2300">2300</option>
                        <option value="2350">2350</option>
                        <option value="2400">2400</option>
                        <option value="2450">2450</option>
                        <option value="2500">2500</option>
                        <option value="2550">2550</option>
                        <option value="2600">2600</option>
                        <option value="2650">2650</option>
                        <option value="2700">2700</option>
                        <option value="2750">2750</option>
                        <option value="2800">2800</option>
                        <option value="2850">2850</option>
                        <option value="2900">2900</option>
                        <option value="2950">2950</option>
                        <option value="3000">3000</option>
                    </select><br />
                    <label>Approx Power Usage between 8am to 4pm</label>
                    <select name="peak_usage" id="peak_usage" size='1' onChange='this.form.submit();'>
                        <option value="10">10%</option>
                        <option value="20">20%</option>
                        <option value="30">30%</option>
                        <option value="40">40%</option>
                        <option value="50">50%</option>
                        <option value="60">60%</option>
                        <option value="70">70%</option>
                        <option value="80">80%</option>
                        <option value="90">90%</option>
                        <option value="100">100%</option>
                    </select><br />

                </form>

控制台：仅显示几个丢失的图像错误，没有其他显示。

解决方案：事实证明这是由我的表单提交方式引起的。 我用提交按钮替换了OnClick调用-并成功了。

Answer 1

这是错误的，在调用preventDefault()时使用event时，参数名称为e ：

 $('#quote_form').submit(function(e) {
-----> event.preventDefault();    ^
                                  |
                                  |

更改它以匹配参数名称：

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

要么：

 $('#quote_form').submit(function(e) {
    e.preventDefault();

或另一种方式：

 $('#quote_form').submit(function() {
        select();
        return false;
});

Answer 2

尝试将event更改为e

$('#quote_form').submit(function(e) {
    e.preventDefault();
    select();
}

或按钮类型更改quote_form到button从submit并像给Click事件

$('#quote_form').click(function() {
    select();
}

Answer 3

尝试这个：

$('#quote_form').submit(function(e) {
    e.preventDefault();
    select();
});

代替：

$('#quote_form').submit(function(e) {
    event.preventDefault();//error event is undefinded
    select();
});

更新

如果添加onlick="this.form.submit()"其提交表单将触发jquery onlick="this.form.submit()"事件。 我找到了解决方案：

从select中移除onclick并在document.ready添加click事件，还移除error(0)其error not defined错误error not defined 。

$("#peak_usage").change(function(){
    $('#quote_form').submit();
});

您还可以设置：

<select name="peak_usage" id="peak_usage" size='1' onchange="$('#quote_form').submit();">
                                                              ^^^^^^^^^^^^^^^^^^^^^^^^

原因：因为this.form将为您提供form元素的形式。 和$（'＃quote_form'）给您表单对象。

DEMO

Answer 4

您具有参数变量e并在函数内部使用event 。 因此，将参数变量更改为event或使e.preventDefault()

$(document).ready(function(){
   $('#quote_form').submit(function(event) {// (e) change to (event)
    event.preventDefault();
    select();
});