BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] jQueryを使わずにフォームのonSubmitイベントでどのSubmitボタンが押されたかを判断する方法 [重複] (英語)

2022-11-22 13:47:13

質問

私は2つの送信ボタンといくつかのコードを持つフォームを持っています。

HTMLです。 

<input type="submit" name="save" value="Save" />
<input type="submit" name="saveAndAdd" value="Save and add another" />

JavaScriptです。 

form.onSubmit = function(evnt) {
    // Do some asyncrhnous stuff, that will later on submit the form
    return false;
}

もちろん、2つの送信ボタンは異なることを達成します。で調べる方法はあるのでしょうか？ onSubmit でどちらのボタンが押されたかを知る方法はありますか？ thatButton.click() ?

理想的には、ボタンのコードを変更せず、この動作を持つ純粋なJavaScriptアドオンを持ちたいと思います。

私は、Firefox が evnt.explicitOriginalTarget があることは知っていますが、他のブラウザのものは見当たりません。

どのように解決するのですか？

サブミットイベントハンドラ自体にはありません。

しかし、あなたが ができるのは は、それぞれのサブミットにクリックハンドラを追加して、どれがクリックされたかをサブミットハンドラに通知することができます。

以下は完全な例です (簡潔さのために jQuery を使用しています)。 

<html>
<head>
  <title>Test Page</title>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript">

  jQuery(function($) {
      var submitActor = null;
      var $form = $('#test');
      var $submitActors = $form.find('input[type=submit]');

      $form.submit(function(event) {
          if (null === submitActor) {
              // If no actor is explicitly clicked, the browser will
              // automatically choose the first in source-order
              // so we do the same here
              submitActor = $submitActors[0];
          }

          console.log(submitActor.name);
          // alert(submitActor.name);

          return false;
      });

      $submitActors.click(function(event) {
          submitActor = this;
      });
  });

  </script>
</head>

<body>

  <form id="test">

    <input type="text" />

    <input type="submit" name="save" value="Save" />
    <input type="submit" name="saveAndAdd" value="Save and add another" />

  </form>

</body>
</html>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します