触发event.preventDefault();仅在满足条件的情况下-jQuery/javascript [英] Trigger event.preventDefault(); only if condition is met - Jquery / javascript

问题描述

我要做的就是在提交表单之前检查一下表单中的某些值(名称，电子邮件)是否还没有存储在数据库中.

我有一个运行良好的php脚本，并返回与问题相对应的字符串，如果没有问题，则返回无输出".

我唯一的问题是event.preventDefault()，仅当php脚本返回无输出"以外的内容时才应调用该事件. 当它在get()调用中时不起作用，并且我尝试使用if语句来确定错误div是否为空，但是它也不起作用.

$(document).ready(function() {
$( "#signupForm" ).submit(function( event ) {
    $.get( "signupchecker.php", { name: $('#name').val(), email: $('#email').val() } ).done(function ( data ) {
        if( data != "no output" ) {
            $( "#error" ).text( data );
        }
    });
    event.preventDefault();
});

});

谢谢！

解决方案

我唯一的问题是event.preventDefault()，仅当php脚本返回无输出"以外的内容时才应调用该事件.

您无法合理地那样做.您必须使用同步ajax请求，在执行网络操作时锁定浏览器的UI，而可能却是非常差的用户体验. (并且最终将不再受jQuery支持.)

相反，请始终避免使用默认值，并且如果PHP脚本返回的值表示允许提交表单，请在DOMFormElement上调用submit(直接，而不是通过jQuery).这样将提交表单，而无需再次运行submit事件处理程序.

例如，如下所示:

$(document).ready(function() {
    $("#signupForm").submit(function(event) {
        var thisForm = this;                // Remember the raw form element
        $.get("signupchecker.php", {
            name: $('#name').val(),
            email: $('#email').val()
        }).done(function(data) {
            if (data != "no output") {
                $("#error").text(data);
            } else {
                thisForm.submit();          // Submit form w/o calling submit event handlers again
            }
        });
        event.preventDefault();             // Always do this
    });
});

请注意，由于这意味着您仅作为用户发起的操作的间接结果提交表单，因此，如果将表单的target设置为打开新窗口，则可能会犯规弹出窗口阻止程序. (您也可能不是.:-)浏览器可以看到XHR是由用户事件启动的，并且表单提交是在XHR完成时完成的，因此它可以确定这是可以的...)

All I want to do is check if some of the values in a form (name, email) are not already in the database before I submit it.

I have a php script that works well and returns strings that corresponds to the issue, or "no output" in case there's nothing wrong.

The only problem I have is with the event.preventDefault(), which should only be called if the php script returns something other than "no output". It doesn't work when it's within the get() call and I tried using an if statement, whether or not the error div is empty or not, but it didn't work either.

$(document).ready(function() {
$( "#signupForm" ).submit(function( event ) {
    $.get( "signupchecker.php", { name: $('#name').val(), email: $('#email').val() } ).done(function ( data ) {
        if( data != "no output" ) {
            $( "#error" ).text( data );
        }
    });
    event.preventDefault();
});

});

thanks!

解决方案

The only problem I have is with the event.preventDefault(), which should only be called if the php script returns something other than "no output".

You can't reasonably do it that way. You'd have to use a synchronous ajax request, locking up the UI of the browser while the network operation was performed, which while possible is very poor UX. (And eventually won't be supported by jQuery anymore.)

Instead, always prevent the default, and if the PHP script returns a value saying the form is allowed to be submitted, call submit on the DOMFormElement (directly, not via jQuery). That will submit the form without running submit event handlers again.

E.g., something like this:

$(document).ready(function() {
    $("#signupForm").submit(function(event) {
        var thisForm = this;                // Remember the raw form element
        $.get("signupchecker.php", {
            name: $('#name').val(),
            email: $('#email').val()
        }).done(function(data) {
            if (data != "no output") {
                $("#error").text(data);
            } else {
                thisForm.submit();          // Submit form w/o calling submit event handlers again
            }
        });
        event.preventDefault();             // Always do this
    });
});

Note that since this means you're submitting the form only as the indirect result of user-initiated action, if the form's target is set to open a new window, you may fall afoul of popup blockers. (You also may not. :-) The browser can see that the XHR was initiated by a user event, and that the form submission is done in the completion of that XHR, so it could decide that it's okay...)

这篇关于触发event.preventDefault();仅在满足条件的情况下-jQuery/javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！