1

私はいくつかのフィールドを持つフォームを持っている状況にあります。

5 つの入力フィールドがあり、 jquery ajax を使用してユーザー名と購入コードの 2 つのフィールドを検証したいと考えています。これら 2 つのフィールドが有効な場合は、(ajax ではなく) borwser のように自然な方法でフォームを送信します。

これが私のjqueryです

$(document).ready(function() {  

  $('#submit').click({status:'initial'}, function(e) {  

     e.preventDefault(); 

     $('.error').hide();
     $('.success').hide();

     // get data from form
     var username = $("input#username").val(); 
     var itemCode = $("input#itemCode").val(); 
     var dataString = 'username ='+ username + '&itemCode=' + itemCode;  

     $.ajax({  
      type: "POST",  
      url: "verify_purchase.php",  
      data: dataString,  
      success: function(html) {  

         // valid purchase
         if (html == 'valid') {
             form.submit();
         } else{
             // if wrong purchase details
             // do some stuff 
         };                  
      }  
    });  

});

問題は、フォームを送信するときです.ajaxは完全に機能しますが、ブラウザがフォームを送信する方法のように、フォームは後で送信されません.

何か助けて??

4

4 に答える 4

1

ユーザーが送信ボタンをクリックしたかどうかを確認する代わりに、検証でエラーが返された場合はJavaScript を使用して自然な送信をブロックします。

このように：

<form action="/somewhere.php" action="post" 
    onsubmit="return startValidatingForm();">

JavaScript 関数は次のようになります。

function startValidatingForm(){
    // Do ajax and validation

    return html == "valid";
}

ここで、ajax リクエストでエラーが見つかった場合、関数が返さfalseれ、フォームが実際に送信されなくなります。関数が戻ると、フォームは自然な方法trueで送信されます。

于 2013-05-25T12:10:33.687 に答える
1

あなたが持っているコードでは、エラーは次の行だと思います：

form.submit();

formどこにも定義がありません。提供したコードだけを使用する場合は、代わりに次のようにすることができます。

$('#submit').parents('form').submit()

submitただし、送信ボタンのイベントを処理する代わりに、フォームにイベント ハンドラーを追加し、検証が失敗した場合は「自然な」送信を停止する方が全体的なアプローチとしては優れていると思いますclick。フォームとブラウザーによっては、テキスト フィールド内で誰かがリターン キーを押すことによって送信される可能性があるため、送信ボタンのクリック イベントは必ずしも信頼できるとは限りません。

したがって、次のようなフォームがある場合:

<form id="my_form" action="purchase.php" method="post">

次に、スクリプトは次のようになります。

$('#my_form').submit(function (e) {
    $('.error').hide();
    $('.success').hide();

    // get data from form
    var username = $(this).find("input#username").val(); 
    var itemCode = $(this).find("input#itemCode").val(); 
    var dataString = 'username ='+ username + '&itemCode=' + itemCode;  

    $.ajax({  
        type: "POST",  
        async: false,
        url: "verify_purchase.php",  
        data: dataString,  
        success: function(html) {  

        // valid purchase
        if (html == 'valid') {
            return true;
        } else{
            // if wrong purchase details
            e.preventDefault();

            // do some stuff
            return false;
        };                  
  } 
});
于 2013-05-25T12:11:33.023 に答える
0

それ以外の：

form.submit();

これを試して：

//use $('#submit') not $(this) {ajax context}
$('#submit').off('click').click(); //this should reaffect native click behaviour on submit
于 2013-05-25T11:55:13.353 に答える
0

通常、フォームを送信するには、ID を JQuery に指定する必要があります。これは、JQuery が DOM 内の要素を見つけて関数を呼び出すためにセレクターを必要とするためです。たとえば、次のようなフォームがあります。

<form id="orderForm" action="orderhandler.php" ...>
some fields...
</form>

jQuery経由でフォームを送信して書き込むためにここに

$('form#orderForm').submit();

また

$('form#orderForm').trigger('submit');
于 2013-05-25T11:55:24.047 に答える