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

Question

我正在使用 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 测试时它没有出现。这是屏幕截图。

Answer 1

我已经测试了你的代码，它可以在 Chrome、IE 8 和 Mozilla Firefox 中运行。检查整个页面中是否有一个元素的名称属性值中包含单词“提交”。如果有重命名的话。例如，像这样的输入标签：<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;
    });
});

我希望这有帮助。