DEMO

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

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

 $('#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并点击该事件

$('#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提交事件。我找到了解决方案：

从select中删除onclick并在document.ready中添加点击事件，同时删除error(0)给出错误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将为您提供表单元素的形式。和$（'＃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();
});

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

4 个答案:

更新

DEMO