表單未提交$ .ajax內部成功函數

Question

我正在使用jquery + Ajax驗證重復的名稱。 一切都工作正常，除了一旦一切都返回真實，表單不提交

發生了什么

• 如果沒有輸入名稱，則會顯示警告框，說明名稱是必需的 - >此處沒有問題
• 如果找到重復的名稱，警告框顯示說明名稱已存在且表單未提交 - >此處沒有問題
• 如果找不到重復的名稱，則會顯示警告框（以證明該條件的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

我會在運行時使用jQuery驗證器檢查它，而不是提交，但另一種方法是進行Rest Style調用。 我認為沒有必要POST一個完整的表單來檢查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");
   }
});

Answer 2

做遠程表單驗證？ 簽出jquery.validate plugin及其.remote()規則。

除此之外你的代碼看起來很好。 這是一個有效的演示： http ： //jsfiddle.net/dKUSb/7/

Answer 3

我已經測試了您的代碼，它適用於Chrome，IE 8和Mozilla Firefox。 檢查在整個頁面中是否有一個元素，其中包含單詞submit的名稱屬性值。 如果有重命名它。 例如，像這樣的輸入標記： <input type="submit" name="submit" value="Submit Form"/>將導致Mozilla Firebug中出現錯誤。

此外，您可以找到替代解決方案。

以下解決方案已在Chrome，IE 8和Mozilla Firefox中成功通過測試。

替代方案

檢索要發布的帖子URL和數據，並在成功回調中執行帖子。

以下實施已在Chrome，IE 8和Mozilla Firefox中成功測試 。 在成功回調中，將檢索要發布的數據並將其發布到URL，並將結果放入具有id 結果的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;
    });
});

我希望這有幫助。

Answer 4

在這種情況下，您可以從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;      
               }
            });
        });

希望這可以幫助

Answer 5

而不是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();

Answer 6

完全由於范圍

你在哪里

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

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

Answer 7

不要嘗試多檢查獲取簡單按鈕並在該事件中添加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()
                 }
             }
         });
     }
 }

Answer 8

表單未提交的原因是您從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(); line以前工作，因為我不太了解你的應用程序，腳本版本等。你可能想考慮使用jsfiddle發布一個例子。

Answer 9

$('#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;
    }
});

像這樣的東西:)不能測試

Answer 10

我們有同樣的問題，並認為我們整理出來了。

問題是.submit()動作在“thread” $.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
   }
}

Answer 11

享受它的工作..

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