表单未提交$ .ajax内部成功函数

时间：2012-08-18 10:30:58

标签： javascript jquery ajax forms

我正在使用jquery + Ajax验证重复的名称。一切都工作正常，只是一旦一切都返回真实，表单就不会提交

发生了什么

  • 如果未输入名称，则会显示警告框，说明名称为 必需 - ＆gt;这里没问题
  • 如果找到重复的名称，警告框将显示说明名称 已存在且表单未提交 - ＆gt;这里没问题
  • 如果找不到重复的名称，则会显示警告框（以证明 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进行测试时没有显示出来。这是截图。

Firebug Error

11 个答案:

答案 0 :(得分：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");
   }
});

答案 1 :(得分：3)

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

除此之外你的代码看起来很好。这是一个有效的演示：http://jsfiddle.net/dKUSb/7/

答案 2 :(得分：3)

我已经测试了您的代码，它适用于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;
    });
});

我希望这会有所帮助。

答案 3 :(得分：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;      
               }
            });
        });

希望这有帮助

答案 4 :(得分：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();

答案 5 :(得分：1)

完全由于范围

你在哪里

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

这是指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/

答案 6 :(得分：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()
                 }
             }
         });
     }
 }

答案 7 :(得分：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发布一个例子。

答案 8 :(得分：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;
    }
});
像这样的东西:) 无法测试

答案 9 :(得分：0)

我们遇到了同样的问题，并认为我们已整理出来。

问题是.submit()操作在“线程”$.ajax内部不起作用$.post。 为此，您必须在async:false块中添加$.ajax指令，并在$.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
   }
}

答案 10 :(得分：0)

享受它的工作.. 

document.createElement('form').submit.call(document.formname);
相关问题
最新问题