Question

似乎我错过了jquery的一些基本概念，因为这个脚本不会做我想做的事：

    $(document).ready(function(){

    $('#form').submit(function(event) {
    console.log( "submitted form, checking #domain_url_input ");
    // event.preventDefault(); 
    var submit_error=false; 
    var is_primary_url = false;
    var url = $('#domain_url_input').val();

    var get_url = '/i.php?a=check&url2check=' + escape(url);
    var valid_data = $.ajax({
        event: event,
        url: get_url,
        success: function(response) {
            // alert('ajax successful'); 
            is_primary_url = $(response).find('#check_div').text(); 
            // alert(is_primary_url);

            var dns_zone    = $('#dns_zone_sel').val(); 

            if (is_primary_url == 'YES' && dns_zone=='') 
                { 
                event.preventDefault();
                alert('Choosing a DNS ZONE is required!');
                $('#dns_zone_sel').focus(); 
                this.submit_error=true; 
                // if (submit_error==true) event.preventDefault(); 
                // return 'error'; 
                } // 

            } // end func success
        }); // ajax  

    }); // submit

    }); // rdy

（我当然减少了代码。）

除了：

之外，代码完美无缺

event.preventDefault（）;

不会生效。

如果我把它放在

之后的第二行

$（'＃form'）。submit（function（event）{...

它会起作用。

ajax-call有效，我得到了积极的结果。好像再也无法预防SUBMIT了？

警告之后：

event.preventDefault（）; 警报（'需要选择DNS区域！'）;

工作完美，意思是，脚本有效，除了preventDefault（）没有效果。这可能是由于我没有正确访问的事件“事件”？

目的是：

我想停止提交活动。我是旧的js脚本，我通过“return false”做到了但这也行不通。顺便说一句：我知道preventDefault（）和“return false”之间的区别，...我只是添加了我尝试过的信息。在这种情况下，“return false”将从$（...）。ajax（）返回到$（...）。submit（）事件。

要点是：当$（）。ajax部分仍在执行请求时，表单submit（）已在进行中。所以我需要让submit（）等到ajax结束？

Thanx任何想法！

所有这些之后解决方案完全按照我的意愿工作 - 感谢我的朋友Andreas，@ Cory和@Michael：

`<script type="text/javascript">
$(document).ready(function(){
var disableSubmit   = false;
var transmitNow     = false;
$('#form').submit(function(event) {
    console.log( "submitted form, checking #domain_url_input ");
    console.log( "disableSubmit=" + disableSubmit); 
    if( transmitNow === true ) return;  
    event.preventDefault(); 
    if (disableSubmit ===true) return; 
    $('#form').prop( 'disabled', true );
    var submit_error=false; 
    var is_primary_url = false;
    var url = $('#domain_url_input').val();
    if (url=='') { alert('Error! A domain/url must be provided!'); return false; } 

    var get_url = '/i.php?a=check&ajax=1&url2check=' 
                        + escape(url) + '&t='+ Date.now();

    disableSubmit   = true; // Formular ausgrauen .... als todo 
    var valid_data = $.ajax({
        url: get_url,
        error: function(){ disableSubmit = false; $('#form').prop( 'disabled', false ); },
        complete: function(){ disableSubmit = false; $('#form').prop( 'disabled', false ); },
        success: function(response) {
            disableSubmit = false; 
            $('#form').prop( 'disabled', false );

            is_primary_url = $(response).find('#is_url_primary_check_div').text(); 

            var registrar   = $('hd[registrar]').val(); 
            var webserver   = $('hd[webserver]').val(); 
            var dns_zone    = $('#dns_zone_sel').val(); 

            if (is_primary_url == 'YES' && dns_zone=='') 
                { 
                // event.preventDefault();
                alert('You entered a primary domain. Choosing a DNS ZONE is required!');
                $('#dns_zone_sel').focus(); 
                submit_error=true; 
                }   
            if (submit_error != true ) 
                { 
                transmitNow = true; 
                $('#form').submit();
                }  
            } // end event func success
        }); // ajax  

    }); // submit

}); // rdy
    </script>`

THANX TO ALL !! :) 开心！

Answer 1

正如Cᴏʀʏ所解释的那样，您的.preventDefault()来电无效，因为该表单已在$.ajax()来电完成时提交。

解决此问题的一种方法是始终直接在.preventDefault()回调中调用submit()，然后在验证成功后，显式调用submit()没有提交表格的论据。

此外，您可能希望在等待Ajax请求时禁用表单的输入字段和提交按钮。这样，您还可以避免submit()回调在进行明确submit()调用时采取任何操作。

用于说明这个想法的简化版本：

var disableSubmit = false;
$('#form').submit( function( event ) {
    event.preventDefault();
    if( disableSubmit ) return;
    disableSubmit = true;
    $('#form input, #form button').prop( 'disabled', true );
    $.ajax({
        ...
        success: function( data ) {
            if( dataIsGood(data) ) {
                $('#form').submit();
                disableSubmit = false;
                $('#form input, #form button').prop( 'disabled', false);
            }
        }
    });
});

此处未处理一些错误和边缘情况 - 例如，如果您从服务器获得error响应，或者根本没有得到响应，该怎么办？但这可能是一个开始的地方。

Answer 2

使用内置表单机制与ajax请求混合是有问题的。如果您想使用ajax提交表单，请在提交表单时离开preventDefault()，然后进行表单验证，如果通过则手动执行$('#form').submit()。

或者，您可以从表单中删除submit按钮并将其替换为常规按钮并捕获＆＃34;提交＆＃34;在$('#form_submit_button').click()上，如果验证通过，则手动提交表单。

后一种方法的基本例子：

HTML：

<form id="form" onSubmit="validate_Form();return false">
    //form fields...no submit-type button
    <button id="form_submit_button">
</form>

JS：

$("#form_submit_button").click(function() {
    if(validate_form()) { //put your ajax code in the validate_form() method
        $("#form").submit();
    }
});

编辑：

正如@Michael_Geary指出的那样，后一种方法并不是很好，因为用户可以点击Enter按钮提交表单，所以如果你想使用该选项，你必须捕获Enter按并停止它提交表单...您可以在此问题中使用已接受的答案：Capture the enter key cross-browser, my solution isn't working，但这会影响整个页面，并且有点复杂。所以第一种方法是最好的。

jquery - 内部函数中的event.preventDefault（）

2 个答案: