0

2 つの送信ボタンを持つフォームがあります。1 つはカート内のアイテムの数量を更新し、もう 1 つはユーザーがチェックアウトに進むことができるようにします。カートに「配送」アイテムがない場合、ユーザーがチェックアウトできないようにしたいと思います。ユーザーが数量を更新できるようにしたいと思います。

もともと私はこのjavascriptを使用しました：

  $('#cartform').submit(function (e) {
    console.log(e)

    if ($('.item.shipping').length > 0) {
      // there are Shipping items in the cart, so proceed
      console.log("OK to checkout")
    } else {
      // there are no Shipping items so display help
      console.log("NO")
      e.preventDefault();
      $('#shipping-calculator-info p').text("Please select shipping destination.")    
    }
  });

これにより、数量の更新ボタンも無効になっていることにすぐに気付きました。

click私の最初の考えは、処理したいボタンだけからイベントをキャッチするpreventDefaultことでした。ただし、これは送信の発生を妨げているようには見えません。次に、おそらく、イベントには、イベントの発生元を指定するフィールドがあるのではないかと考えました。これにより、上記のコードeに条件を追加できるようになります。submitただし、そのようなフィールドを見つけることができませんでした (この情報が存在しないというヒントを読みました)。

同じフォームの多数の送信ボタンのうちの 1 つだけの既定のアクションを防ぐにはどうすればよいですか?

4

4 に答える 4

1

ボタンではなく、フォームを参照しています。問題ありません。jQuery の優れたセレクターを使用して、送信ボタンを見つけるだけです。これが実際の例です：

<form id="form1" method="post" action="formDataHandler.php">
<input name='text1' type='text' value='text input'><br />
<input id='subBtn1' type='submit' value='submit 1'><br />
<input id='subBtn2' type='submit' value='submit 2'>
</form>

<script type="text/javascript">
$("#form1").find('input[type=submit]').on('click', function (e) {
alert($(e.target).val());
    if ($(e.target).val() == 'submit 1') { 
    e.preventDefault();
    } else {
        //do something else
    }
});
</script>
于 2013-02-10T01:53:45.633 に答える
0

フォームの送信イベントにアタッチするのではなく、実際のボタンのクリック イベントにアタッチしてみませんか?

そうすれば、各ボタンに適切なコードを提供できます。チェックアウト ボタンのハンドラーで JavaScript を使用してフォームを送信し、[更新] ボタンから DOM を更新するだけです。

于 2013-02-10T01:53:59.333 に答える
0

あなたはただする必要がありreturn false;ます。

$('#cartform').submit(function (e) {
    console.log(e)

    if ($('.item.shipping').length > 0) {
      // there are Shipping items in the cart, so proceed
      console.log("OK to checkout")
    } else {
      // there are no Shipping items so display help
      console.log("NO")
      e.preventDefault();
      $('#shipping-calculator-info p').text("Please select shipping destination.")    
      return false;
    }
});
于 2013-02-10T01:54:00.920 に答える
0

使用できる簡単な回避策は、送信ボタンを単純なボタンに「変換」してから、コードをクリック イベントにバインドし、必要に応じてクリック イベント内から使用することです。

$('#cartform').submit();

フォームを手動で送信します。

于 2013-02-10T02:00:03.010 に答える