javascript - 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;
});