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でテストしているときに表示されませんでした。これがスクリーンショットです。

Firebugエラー

4

11 に答える 11

4

送信時ではなく、実行時にjQueryバリデーターでチェックしますが、別のアプローチはRESTスタイルの呼び出しを行うことです。1つのフィールドをチェックするためだけに完全なフォームをPOSTする必要はないと思います。

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

リモートフォーム検証を行っていますか？jquery.validate pluginとそのルールを確認して.remote()ください。

それ以外は、コードは正常に見えます。動作するデモは次のとおりです：http：//jsfiddle.net/dKUSb/7/

于 2012-08-18T10:36:33.260 に答える
3

私はあなたのコードをテストしました、そしてそれはChrome、IE8そしてMozillaFirefoxで動作します。ページ全体に、 name属性値にsubmitという単語を含む要素があるかどうかを確認します。名前を変更する場合。たとえば、次のような入力タグを使用<input type="submit" name="submit" value="Submit Form"/>すると、MozillaFirebugにエラーが表示されます。

さらに以下に、代替ソリューションを見つけることができます。

次のソリューションは、Chrome、IE 8、MozillaFirefoxで正常にテストされています。

代替ソリューション

投稿するURLとデータを取得し、成功コールバックで投稿を実行します。

次の実装は、Chrome、IE 8、MozillaFirefoxで正常にテストされています。成功コールバックでは、投稿されるデータが取得されてURLに投稿され、結果はidresultの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 に答える
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

これは、フォームではなく、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 に答える
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によって提案された送信ボタンを添付することを検討してください（ただし、 HTML属性ではなくjQueryを使用してアタッチします）。例：

$('#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 に答える
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こと$.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
   }
}
于 2012-10-26T11:00:04.190 に答える
0

それが機能していることをお楽しみください。

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