jQuery投稿フォーム2回

Question

私はこの質問が数百回答えられていることを知っていますが、私は潜在的なsolutonsの負荷を実行していますが、それらのどれも私のインスタンスでは動作していないようです。

以下は私のフォームとフォームを送信するためのコードです。それはPHPスクリプトを起動します。今私は手動でフォームを試して、それは一度だけ提出するので、スクリプト自体が提出の原因ではないことを知っている。

jQueryコードの第1部分は、ライトボックスを開いて下の表から値を引き出すことに関連していますが、何らかの理由でそれが潜在的な問題である場合に備えています。

のjQueryコード：ここで

$(document).ready(function(){ 
    $('.form_error').hide(); 
    $('a.launch-1').click(function() { 
     var launcher = $(this).attr('id'), 
      launcher = launcher.split('_'); 
     launcher, launcher[1], $('td .'+launcher[1]); 
     $('.'+launcher[1]).each(function(){ 
      var field = $(this).attr('data-name'), 
       fieldValue = $(this).html(); 
      if(field === 'InvoiceID'){ 
       $("#previouspaymentsload").load("functions/invoicing_payments_received.php?invoice="+fieldValue, null, function() { 
        $("#previouspaymentsloader").hide(); 
       }); 
      } else if(field === 'InvoiceNumber'){ 
       $("#addinvoicenum").html(fieldValue); 
      } 
      $('#'+field).val(fieldValue); 
     }); 
    }); 
    $("#addpayment_submit").click(function(event) {   
     $('.form_error').hide(); 
     var amount = $("input#amount").val(); 
     if (amount == "") { 
      $("#amount_error").show(); 
      $("input#amount").focus(); 
      return false; 
     } 
     date = $("input#date").val(); 
     if (date == "") { 
      $("#date_error").show(); 
      $("input#date").focus(); 
      return false; 
     } 
     credit = $("input#credit").val(); 
     invoiceID = $("input#InvoiceID").val(); 
     by = $("input#by").val(); 
     dataString = 'amount='+ amount + '&date=' + date + '&credit=' + credit + '&InvoiceID=' + invoiceID + '&by=' + by; 
     $.ajax({ 
      type: "POST", 
      url: "functions/invoicing_payments_make.php", 
      data: dataString, 
      success: function(result) { 
       if(result == 1){      
        $('#payment_window_message_success').fadeIn(300); 
        $('#payment_window_message_success').delay(5000).fadeOut(700); 
        return false; 
       } else { 
        $('#payment_window_message_error_mes').html(result); 
        $('#payment_window_message_error').fadeIn(300); 
        $('#payment_window_message_error').delay(5000).fadeOut(700); 
        return false; 
       } 
      }, 
      error: function() { 
       $('#payment_window_message_error_mes').html("An error occured, form was not submitted"); 
       $('#payment_window_message_error').fadeIn(300); 
       $('#payment_window_message_error').delay(5000).fadeOut(700); 
      } 
     }); 
     return false; 
    }); 
}); 

がHTML形式である：

<div id="makepayment_form"> 
    <form name="payment" id="payment" class="halfboxform"> 
    <input type="hidden" name="InvoiceID" id="InvoiceID" /> 
    <input type="hidden" name="by" id="by" value="<?php echo $userInfo_ID; ?>" /> 
    <fieldset> 
     <label for="amount" class="label">Amount:</label> 
     <input type="text" id="amount" name="amount" value="0.00" /> 
     <p class="form_error clearb red input" id="amount_error">This field is required.</p> 
     <label for="credit" class="label">Credit:</label> 
     <input type="text" id="credit" name="credit" /> 
     <label for="amount" class="label">Date:</label> 
     <input type="text" id="date" name="date" /> 
     <p class="form_error clearb red input" id="date_error">This field is required.</p> 
    </fieldset> 
    <input type="submit" class="submit" value="Add Payment" id="addpayment_submit"> 
    </form> 
</div> 

は、誰かがその狂気私を運転として役立つことを願って。ありがとう。

Answer 1

クリック機能の下に、preventDefault()をイベントに追加します。

$("#addpayment_submit").click(function(event) { 
    event.preventDefault(); 
    // Code here 
    return false; 
}); 

これで問題が解決する場合があります。 preventDeafult()は、デフォルトイベントのトリガーを停止します。この場合、フォームをクリックするとトリガーされ、次にajax関数を使用してフォームを送信すると再びトリガーされます。

クリック機能の最後にreturn false;を追加することもできます（上記参照）。

Answer 2

サーバーにデータを送信するためにAJAXリクエストを使用しているので、formタグと<input type="submit" .../>を使用する理由はありません（代わりに単純なボタンを使用できます）。また、私はカンボの答えがうまくいくと思います。それができない場合は、event.stopPropagation()もお試しください。

Answer 3

また、送信ボタン「クリック」にアクションをバインドしています。しかし、ユーザーがテキストフィールドに入力中に「入力」を押して、デフォルトのフォームアクションをトリガーするとどうなりますか？あなたの機能は実行されません。

私はこの変更になります。これに

$("#addpayment_submit").click(function(event) { 
    event.preventDefault(); 
    //code 
} 

：

$("#payment").bind('submit', function(event) { 
    event.preventDefault(); 
    //code 
} 

あなたがいないことを捕獲しようとしているので、今では、ユーザーがフォームを送信する方法問題ではないがどのような。

Answer 4

残念ながら@ user2247104の推奨事項に基づいてスクリプトを変更しましたが、フォームはまだ2回送信されました。

しかし@Cumbo、@Barmarは、それはそれが仕事を得るために除いて、正しい軌道に乗ってもいた

event.preventDefault();

スクリプトの最下部に配置する必要

：

}); 
event.preventDefault(); 
return false; 

ありがとうございます。

Answer 5

イベントを処理するためのデフォルトの行動だけでなく、execイベントハンドラの下流のチェーンを呼び出します。 これはevent.preventDefault()に加えてevent.stopImmediatePropagation()を呼び出すことによって行うことができます。

例コード：次の行を追加

$("#addpayment_submit").on('submit', function(event) { 
    event.preventDefault(); 
    event.stopImmediatePropagation(); 
}); 

Answer 6

してみてください。

event.preventDefault(); 
event.stopImmediatePropagation(); 

これは私に役立ちました。