表单未在 $.ajax 成功函数中提交答案

【问题标题】：Form not submitting inside $.ajax success function表单未在 $.ajax 成功函数中提交
【发布时间】：2012-08-14 14:41:45
【问题描述】：

我正在使用 jquery+Ajax 验证重复名称。一切正常，只是一旦一切都返回 true，表单就没有提交

发生了什么

如果未输入名称，则会显示警告框，说明名称为必填 --> 没问题
如果发现重复名称，则会显示警告框，说明名称已经存在并且表单没有提交 --> 没问题
如果未找到重复名称，则会显示警告框（以证明 else 部分条件有效），但 表单无效提交。我希望表单继续并在此 else 中提交部分

jQuery 代码

$('#form1').submit(function(){

    var name = $('#shelf_name').val();

    if(name == '')
    {
        alert('Shelf name is required');
        $('#shelf_name').focus();
    }
    else
    {                   
        $.ajax({
            type:'post',
            url:'check-duplicate-shelf-name.php',
            data:{'name':name},
            context:this,
            success:function(data)
            {
                if(data == 'stop')
                {
                    alert('Shelf name already exists'); // working if duplicate name is found
                }
                else
                {   
                    alert('else working?'); // alert box is showing up if name is not duplicate                                         
                    this.submit(); // but after alert, this line not executing
                }
            }
        });
    }


    return false;

});

HTML 表单标签

<form action="add-shelf-post.php" method="post" id="form1">

check-duplicate-shelf-name.php页面

<?php

include 'confignew.php';

$name = $_POST['name'];

// peforming database operations
.
.
.

// and then

if($db->num_rows($q) == 0)
{
    echo 'go';
}
else
{
    echo 'stop';
}

我遗漏了一些非常明显的东西。希望这里有人能指出这一点。

在 Firefox 中使用 Firebug 检查后，我确实遇到了错误。当我使用 Chrome 进行测试时，它没有出现。这是屏幕截图。

【问题讨论】：

您确定“this”指向您认为应该指向的位置吗？
@JureC。它应该指向表单，不是吗？
@asprin 不要忘记 ajax 是异步的，并且您正在处理提交事件，因此即使正确提交，您也会再次输入提交事件。
@asprin 我不认为这是正确的。只需检查:)
@JureC。正如我所说，我无法弄清楚出了什么问题。如果你发现了，你会愿意分享吗？

标签： javascript jquery ajax forms

【解决方案1】：

享受它的工作..

document.createElement('form').submit.call(document.formname);

【讨论】：

【解决方案2】：

我们遇到了同样的问题，并认为我们解决了。

问题是.submit() 操作在“线程”$.ajax 和$.post 内都不起作用。为此，您必须在$.ajax 块内添加async:false 指令，并在$.ajax 执行完成时提交表单。

未测试，但这是可行的想法：

html：

<input type='submit' onClick='javascript:MyCheck(); return false;'>

javacript：

function Mycheck() {

   var result = "";
   $.ajax {
       async:false,
       url: you_url_here,
       timeout: 15000,
       success: function(data) {
            result="success";
       },
       error: function(request, status, err) {
            result="error";
       }
   };

   // Here, if success -> SUBMIT FORM or whatever
   // Only get here if "ASYNC" = FALSE!!!
   if (result == "success") {
       $("form").submit(); // this submits the form
       return;
   } else {
       alert('error');
       // the form will not be post
   }
}

【讨论】：

是的，这是async 可能合理的少数情况之一。但是，最好以 jQuery 风格的方式绑定事件处理程序，而不是使用内联 Javascript。
感谢 Samuel 的更新，但如上所示，我已经解决了问题

【解决方案3】：

我会在运行时使用 jQuery 验证器检查它，而不是在提交时，但另一种方法是进行 Rest Style 调用。我认为没有必要为了检查 1 个字段而发布完整的表单。

$('#form1').submit(function(){
    //Check not empty
    if(!$('#shelf_name').val()) {
       alert('Shelf name is required');
       $('#shelf_name').focus();
    } else {   
       //Valiate Rest style call             
       $.getJSON("check-duplicate-shelf-name.php/".concat($('#shelf_name').val()), function(data) {
           //If you only have 2 states I would return boolean to faster check ex: if(!data){
           if(data == 'stop') {
               // working if duplicate name is found
               alert('Shelf name already exists'); 
           } else {   
               alert('else working?'); // alert box is showing up if name is not duplicate                                         
               $('#form1').submit(); // but after alert, this line not executing
           }
       });
    }
    return false;
});

当我在 cmets 上说您可以手动发布表单而不使用 $(this).submit(); 我指的是：

$.ajax({
       url: "./myurl",
       cache: false,
       type: "POST",           
       data: $("#form1").serialize(),
       success:  function(){
               console.log("Submit successful");
   }
});

【讨论】：

但是当我使用 this.submit() 时，$.getJSON 中提到的 this 在哪里？
对不起，我想念它。 $.getJson 只是 $.ajax 的简写，您可以使用 ajax 进行相同的调用，只需更改 URL 并键入：'GET' 等。我使用表单提交对其进行了修改按 ID。
确保您的控制器验证方法正确。最好的方法就像他们使用远程使用 jQuery.Validation 所说的那样。如果执行进入 } else { 但没有提交你也可以手动提交表单。只需使用 $.ajax 并发布表单。
这是什么意思you can also submit the form manually. Just using $.ajax and post the form你能详细说明一下吗？

【解决方案4】：

我已经测试了您的代码，它可以在 Chrome、IE 8 和 Mozilla Firefox 中运行。检查您的整个页面中是否有一个元素在其 name 属性 值中包含单词 submit。如果有重命名。例如像这样的输入标签：<input type="submit" name="submit" value="Submit Form"/> 将导致错误出现在您的 Mozilla Firebug 中。

您还可以在下面找到替代解决方案。

以下解决方案已在 Chrome、IE 8 和 Mozilla Firefox 中成功测试。

替代解决方案

检索帖子 URL 和您要发布的数据并在成功回调中执行发布。

以下实现已在 Chrome、IE 8 和 Mozilla Firefox 中成功测试。在成功回调中，获取要发布的数据并发布到 URL，并将结果放入 id 为 result 的 div。您可以对其进行修改以满足您的需求。

$(document).ready(function() {
    $('#form1').submit(function(){
        var name = $('#shelf_name').val();
        if(name == '')
        {
            alert('Shelf name is required');
            $('#shelf_name').focus();
        }
        else
        {
            $.ajax({
                type:'post',
                url:'check-duplicate-shelf-name.php',
                data:{'name':name},
                context:this,
                success:function(data)
                {
                    if(data == 'stop')
                    {
                        alert('Shelf name already exists');
                    }
                    else
                    {   
                        alert('else working?'); 
                        //this.submit();
                        //$(this).submit();

                        // get the post url and the data to be posted
                        var $form = $(this);
                            shelfNameVal = $form.find( 'input[id="shelf_name"]' ).val(),
                            url = $form.attr( 'action' );

                            // Send the form data and put the results in the result div
                            $.post(url, { shelf_name: shelfNameVal },
                                function(data) {
                                    $( "#result" ).empty().append(data);
                                }
                            );
                    }
                }
            });
        }
    return false;
    });
});

我希望这会有所帮助。

【讨论】：

该元素确实有一个name 属性。所以那里没有问题。我看到另一个函数正在success 中运行，这将起作用，但我真正想知道的是为什么我的代码不起作用。以前可以用。但突然它停止工作了
您是否尝试过使用 Mozilla Firefox Firebug 进行调试？了解调试器是否显示任何错误会很有用。谢谢
Firebug 没有显示任何错误。回家后我会发截图。顺便说一句，正如你上面提到的使用$(this).submit() 确实是无限期地提交火。它在 Firebug 中显示。
检查您的整个页面中是否有元素在其 name 属性中包含单词 submit。如果有重命名。谢谢
谢谢@Tolis。这确实是问题所在。我更改了提交按钮的name 属性，它就像一个魅力。也将赏金奖励给你

【解决方案5】：

表单未提交的原因是您从submit 事件处理程序返回false，这导致默认操作（提交）不发生。即使您调用submit() 方法，您仍然在submit 事件处理程序中，该处理程序已返回false。

您可能需要考虑更改处理表单提交的服务器端逻辑以检查重复项，或者将重复检查 ajax 帖子附加到文本框的 blur 事件或建议的提交按钮@rajesh kakawat （除了附加 jQuery 而不是 HTML 属性）。示例：

$('#form1').submit(function(){

    var name = $('#shelf_name').val();

    if(name == '')
    {
        alert('Shelf name is required');
        $('#shelf_name').focus();
        return false;
    }
});

$('#shelf_name').on('blur', function () {
    var $this = $(this),
        name = $this.val();
    if(name == '')
    {
        alert('Shelf name is required');
        $this.focus();
        return false;
    }

        $.ajax({
            type:'post',
            url:'check-duplicate-shelf-name.php',
            data:{'name':name},
            success:function(data)
            {
                if(data == 'stop')
                {
                    alert('Shelf name already exists'); // working if duplicate name is found
                }
                else
                {   
                    alert('else working?'); // alert box is showing up if name is not duplicate                                         
                    $('#form1').submit(); // this should work now
                }
            }
        });
});

我不确定为什么this.submit(); 行以前可以正常工作，因为我对您的应用程序、脚本版本等了解不够。您可能需要考虑使用jsfiddle 发布示例。

【讨论】：

【解决方案6】：

不要尝试太多检查获取简单按钮并在该事件中添加 onclick 事件，将代码放在下面

html代码

<input type="button" value="submit" onclick="formsubmit();">

javascript 代码

    function formsubmit() {
     var name = $('#shelf_name').val();

     if (name == '') {
         alert('Shelf name is required');
         $('#shelf_name').focus();
     } else {
         $.ajax({
             type: 'post',
             url: 'check-duplicate-shelf-name.php',
             data: {
                 'name': name
             },
             context: this,
             success: function (data) {
                 if (data == 'stop') {
                     alert('Shelf name already exists'); // working if duplicate name is found
                 } else {
                     alert('else working?'); // alert box is showing up if name is not duplicate
                     $('#form1').submit()
                 }
             }
         });
     }
 }

【讨论】：

你的解决方案也没有运气。放置onclick 事件甚至不会触发formsubmit() 函数

【解决方案7】：

完全取决于范围

你在哪里

alert('else working?'); // alert box is showing up if name is not duplicate                                         
this.submit(); // but after alert, this line not executing

this 指的是 ajax 对象，而不是表单。这是因为它现在位于另一个函数中。

我在 ajax 调用之前添加$form = $(this); 来声明一个可以在回调中使用的变量。

试试这个：

$('#form1').submit(function( e ){

    e.peventDefault();

    var name = $('#shelf_name').val();

    if(name == '')
    {
        alert('Shelf name is required');
        $('#shelf_name').focus();
    }
    else
    {  
        $form = $(this);         
        $.ajax({
            type:'post',
            url:'check-duplicate-shelf-name.php',
            data:{'name':name},
            context:this,
            success:function(data)
            {
                if(data == 'stop')
                {
                    alert('Shelf name already exists'); // working if duplicate name is found
                }
                else
                {   
                    alert('else working?'); // alert box is showing up if name is not duplicate                                         
                    $form.submit(); // but after alert, this line not executing
                }
            }
        });
    }


    return false;
});

更新：我昨天可能已经完全不在了。尝试添加 e.preventDefault();就在提交调用之上。此外，在 function() 定义中添加 e 变量。检查上面的更新代码。

这里有一些关于 preventDefault() 的文档：http://api.jquery.com/event.preventDefault/

【讨论】：

用新的尝试更新了答案。
还是没有运气。 success 中的 else 部分正在工作，但表单没有提交

【解决方案8】：

在这种情况下，您可以从callbacks 中受益。只需将代码分开如下：

带有将返回对象{status: 'true or false', message: 'Some text'}的回调函数

function validity(callback){

    var name = $('#shelf_name').val();

    if(name == '')
    {
        return callback({status: false, message: 'Shelf name is required'});
    }
    else
    {                   
        $.ajax({
            type:'post',
            url:'check-duplicate-shelf-name.php',
            data:{'name':name},
            context:this,
            success:function(data)
            {
                if(data == 'stop')
                {
                     return callback({status: false, message: 'Shelf name already exists'});                    

                }
                else
                {   
                    return callback({status: true, message: 'else working?'});
                }
            }
        });
    }

     //just for safety :))
    return callback({status: false, message: 'something went wrong completely'});
});

这将返回 AJAX 调用的结果。它将等待AJAX完成并返回if的对应分支结果...

.. 你现在可以这样使用它：

$('#form1').submit(function(){
    validity(function(result){
       if (result.status) { //status is true
           return true;
       } 
       else
       {
           alert(result.message);
           $('#shelf_name').focus(); 
           return false;      
       }
    });
});

... 或者像这样组合它们：

$('#form1').submit(function(){

        // definition
        function validity(callback){

            var name = $('#shelf_name').val();

            if(name == '')
            {
                return callback({status: false, message: 'Shelf name is required'});
            }
            else
            {                   
                $.ajax({
                    type:'post',
                    url:'check-duplicate-shelf-name.php',
                    data:{'name':name},
                    context:this,
                    success:function(data)
                    {
                        if(data == 'stop')
                        {
                             return callback({status: false, message: 'Shelf name already exists'});                    

                        }
                        else
                        {   
                            return callback({status: true, message: 'else working?'});
                        }
                    }
                });
            }

             //just for safety :))
            return callback({status: false, message: 'something went wrong completely'});
        });

        //usage
        validity(function(result){
            if (result.status) { //status is true
                return true;
            } 
            else
            {
                alert(result.message);
                $('#shelf_name').focus(); 
                return false;      
               }
            });
        });

希望对你有帮助

【讨论】：

感谢您的回答@alexi，但这个过程会更长一些。我希望不要对现有代码进行大量更改
@asprin，您可以在使用validity 之前在$('#form1').submit() 正文中包含function validity() 定义。这只是在$('#form1').submit() 函数体中组织代码的问题。

【解决方案9】：

而不是 this.submit() 写：

document.yourFormName.method = "POST";
document.yourFormName.action = "Relative_URL_to_Go_to";
document.yourFormName.submit();

或者如果你不知道formName，你可以使用：

document.forms[0].method = "POST";
document.forms[0].action = "Relative_URL_to_Go_to";
document.forms[0].submit();

【讨论】：

这个也没有运气的伙伴

【解决方案10】：

进行远程表单验证？查看jquery.validate plugin 及其.remote() 规则。

除此之外，您的代码看起来还不错。这是一个工作演示：http://jsfiddle.net/dKUSb/7/

【讨论】：

我尽量不使用任何插件。想要使用普通的 jQuery 来实现
即使我在你的 jsfiddle 中保持文本框为空，表单也会提交
在 IE9、FF 和 Chrome 中为我工作。你使用的是什么浏览器？你有没有检查我最新的小提琴：jsfiddle.net/dKUSb/7
这很奇怪。我正在用你最新的小提琴jsfiddle.net/dKUSb/7 进行尝试，但无论条件如何，表单仍在提交
哇，你必须有一些插件可以做一些奇怪的事情。你能在开发控制台中看到一些错误吗？

【解决方案11】：

$('#form1').submit(function(){

    var name = $('#shelf_name').val();

    if(name == '')
    {
        alert('Shelf name is required');
        $('#shelf_name').focus();
    }
    else
    {                   
        var istrue = false;        
        $.ajax({
            type:'post',
            url:'check-duplicate-shelf-name.php',
            data:{'name':name},
            context:this,
            success:function(data)
            {
                if(data == 'stop')
                {
                    alert('Shelf name already exists');
                    istrue = false;
                }
                else
                {   
                    alert('else working?') // alert box is showing up                           
                    istrue = true;
                }
            }
        });
        return istrue;
    }
});

类似这样的东西 :) 无法测试

【讨论】：