0

さて、この質問のさまざまな形が尋ねられましたが、私の特定のケースを機能させるのに十分な情報を見つけることができないので、これが私がやろうとしていることの文脈です：

要素の半分が通常のようにページに表示され、残りの半分の要素がモーダルで表示されているフォームがあります（同じページにありますが、最初は非表示で、すべての要素に情報が事前に入力されています。 DBなので、デフォルトで有効です）。このフォームには2つの送信ボタンもあります。1つは要素の前半の下部にあるページにあり、もう1つはモーダル自体にあります。最初の送信ボタンがクリックされたときに、フォームで通常のネイティブHTML5検証を実行する必要があります（はい、モーダルのフィールドを含むフォーム全体でこれを実行する必要がありますが、前述のように、事前に入力されていますDBから離れているため、デフォルトで有効になります）。

ただし、ページ自体のすべての要素が有効になったら、フォームをまだ送信したくありません。代わりに、残りの半分の要素とともにモーダルを表示したいと思います（ここでも、DBからの情報が事前に入力されています-ユーザーにその情報を確認してもらいたいです）。モーダルに含まれている送信ボタンをクリックすると、同じ通常のHTML5検証を実行してから、実際にフォームを送信します（すべてがまだ有効である限り）。

そのため、別の回答で次のjqueryを見つけました。これにより、ブラウザーはフォームでHTML5検証を実行できますが、送信イベントはブロックされます。

    $(function() {
      $('#form').submit(function(event){

        // cancels the form submission
        event.preventDefault();

      });
    });

私の問題はこれです。上記のjqueryは、最初の送信ボタンのクリックでのみ実行され、2番目のボタンのクリックでは実行されません。これを行う方法があれば、私の問題は解決すると思います。繰り返しになりますが、これを行う理由は、フォーム全体が完全に送信される前にポップアップするモーダルに表示される情報をユーザーに確認してもらいたいためです...モーダルを使用しないことでこれを軽減できることを知っていますすべてを1ページにまとめていますが、私は本当にモーダルを使用したいと思っています。この質問が見当違いであるか、すでに回答されているか、混乱している、または他の何かである場合は申し訳ありません。紛らわしい場合や、さらに説明やコードが必要な場合は、お知らせください。質問を編集します。

前もって感謝します。

4

2 に答える 2

0

だからあなたが求めていることをするために、これはトリックをするべきです：

 $(function() {
  //track whether the form has been submitted, define here so it persists across submit events
  var submitted = false;
  $('#form').submit(function(event){
    // the outer function's variables are available in the inner function
    if (!submitted) {
      event.preventDefault();
      submitted = true;
    }
  });
});

しかし、これがあなたの究極の目的を達成するための最良の方法であるかどうかは本当にわかりません。javascript検証（jQuery検証プラグインなど）を使用し、ボタンクリック後の最初のセクション（送信ではない）を検証してから、フォームの最初の部分が有効かどうかを追跡することをお勧めします。送信してから、モーダルを表示することにします。

つまり、次のようなことを行います（擬似コード、アプローチを説明するためだけに、そのままでは機能しません）：

 $(function() {
  $('#form').on('click','button.first', function(e){
    //check that the first part of the form is valid when the `<button class="first">` is clicked, if it is, show the modal:
    var firstSectionValid = $('#form').find('#first-section').validate();
    if (!firstSectionValid) {
      showModal();
    }
  });
});

次に、フォームのモーダルセクションに送信ボタンを1つだけ配置します。

于 2012-11-24T22:20:22.537 に答える
0

jQueryは、.one()まさにそれを行うためのメソッドを提供します。

$('#form').one( "submit", function(event){

    event.preventDefault();

});
于 2012-11-24T22:21:42.310 に答える