Question

我的表单HTML看起来像这样。

<form novalidate action="register.php" method="post" >
    <label for="username">Username</label>
    <input type="text" name="username" required placeholder="Your username" autofocus/>

    <input type="submit" name="register" value="Register" cid="submit" />
</form>

我的jQuery看起来像这样

$("form").submit(function(e) {
    var $form = $(this);
    var serializedData = $form.serialize();    
    request = $.ajax({
        url: "check.php",
        type: "post",
        data: { formData: serializedData },
        datetype: "JSON"
    });
    request.done(function(response, textStatus, jqXHR) {
        console.log("HELLO");
        $('form').unbind(); 
        $('form').submit();
    });
    e.preventDefault();
});

令人遗憾的是，它会将hello记录到控制台，但只需点击提交按钮就不会提交表单。我需要按两次才能提交按钮。

任何人都可以告诉我这个问题，我该如何解决它，以便1次点击就足以提交表单。

注意：表单数据发送以进行验证，而不是实际提交。如果电子邮件，用户名等数据有效，我希望只需点击一下即可提交表单。

Answer 1

首先，我认为使用成功函数而不是.done（）函数会更清晰。例如：

$("form").submit(function(e) {
    e.preventDefault();

    var $form = $(this);
    var serializedData = $form.serialize();

    request = $.ajax({
        // Merge the check.php and register.php into one file so you don't have to  'send' the data twice.
        url: "register.php",
        type: "post",
        data: { formData: serializedData },
        datetype: "JSON",
        success: function() {
            console.log("This form has been submitted via AJAX");
        }
    });
});

请注意，我删除了.unbind（）函数，因为我怀疑它可能是您的代码执行的原因。它从表单中删除事件处理程序，无论其类型如何（请参阅：http://api.jquery.com/unbind/）。另外，我把e.preventDefault（）放在了开头。我建议您尝试使用这段经过编辑的代码，并告诉我们它是否有效。

编辑：哦，是的，当你通过AJAX发送数据时，你不需要提交它。

Answer 2

尝试从表单提交中分离验证。

只需更改此行：

$("form").submit(function(e) {

到

$("input[name='register']").click(function(e) {

Answer 3

试试这个。

$("form").submit(function(e) {
    var $form = $(this);
    var serializedData = $form.serialize();    
    request = $.ajax({
        url: "check.php",
        type: "post",
        data: { formData: serializedData },
        datetype: "JSON"
    });
    request.done(function(response, textStatus, jqXHR) {
        console.log("HELLO");
        $('form').unbind(); 
        $('form').submit();
    });
});

Answer 4

$("form").submit(function(e) {
    e.preventDefault();

    var $form = $(this);
    var serializedData = $form.serialize();

    $.ajax({
        url: "check.php",
        type: "post",
        data: { formData: serializedData },
        datatype: "JSON",
        success: function(data) {
            return data;
        }
    });
});

所以，要打破它。

使用preventDefault（）停止表单提交。

获取表单数据并将其提交给验证程序脚本。

我假设返回值是一个布尔值。如果它被验证，那将是真的，或者是假的。

返回将继续提交表单的值或结束它。

注意：这是验证表单的可怕方法。我将使用表单提交在服务器上验证我的表单，因为javascript可以非常容易地使用。从强制服务器的真实响应到关闭提交事件监听器的所有内容。

Answer 5

一旦我遇到同样的问题我发现的是我的网址xxx.php中有一些错误它可能会返回错误消息，例如“注意：未定义的变量：jxx in xxx.php .....” 它可能让ajax以意想不到的方式运行。仅供参考。

Answer 6

您可以创建一个普通按钮并单击某个功能，而不用单击“提交按钮”时阻止默认操作，在该功能的最后，使用$('#form').submit();提交表单。不再令人困惑，可以防止默认设置。

Answer 7

由于您是通过ajax发布数据，因此无需致电submit()。

编辑您可能需要根据需要调整contentType和/或其他ajax参数。 PHP示例非常基础。你的表格很可能复杂得多。此外，您将需要清理任何PHP数据 - 不要只依赖$_POST

<强> jQuery的：

$("form").submit(function(e) {
    $.ajax({
        'type': 'post',
        'contentType': 'application/json',
        'url': 'post.php',
        'dataType': 'json',
        'data': { formData: $(this).serialize},
        'timeout': 50000
     ).done(function(data) {
         // Response from your validation script
         if (data === true)
         {
            // SUCCESS!
         }
         else
         {
             // Something happened.
         }
     ).fail(function(error) {
         console.log(error);
     });
    e.preventDefault();
});

<强> PHP

$is_valid = FALSE;
$name = $_POST['name'];

if ($name !== '')
{
     $is_valid = TRUE;
}
else
{
   return FALSE;
}

if ($is_valid)
{
    // insert into db or email or whatver
    return TRUE;
}

必须单击提交两次以获取AJAX请求才能触发表单提交

7 个答案: