5

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

萤火虫错误

4

11 回答 11

4

我会在运行时使用 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;
});​

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

$.ajax({
       url: "./myurl",
       cache: false,
       type: "POST",           
       data: $("#form1").serialize(),
       success:  function(){
               console.log("Submit successful");
   }
});
于 2012-08-22T09:52:18.683 回答
3

我已经测试了您的代码，它可以在 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;
    });
});

我希望这有帮助。

于 2012-08-26T09:38:04.993 回答
3

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

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

于 2012-08-18T10:36:33.260 回答
1

不要尝试太多检查获取简单按钮并在该事件中添加 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()
                 }
             }
         });
     }
 }
于 2012-08-25T09:58:56.443 回答
1

表单未提交的原因是您false从submit事件处理程序返回，这导致默认操作（提交）不发生。即使您调用该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发布示例。

于 2012-08-27T18:59:00.447 回答
1

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;      
               }
            });
        });

希望这可以帮助

于 2012-08-22T11:27:48.863 回答
1

而不是 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();
于 2012-08-22T12:14:34.383 回答
1

完全由于范围

你在哪里

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

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

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

尝试这个：

$('#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/

于 2012-08-22T15:22:15.247 回答
0 
$('#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;
    }
});

像这样的东西:)无法测试

于 2012-08-18T10:47:00.393 回答
0

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

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

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

html:

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

脚本：

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
   }
}
于 2012-10-26T11:00:04.190 回答
0

享受它的工作..

document.createElement('form').submit.call(document.formname);
于 2016-05-10T09:54:37.420 回答