jQuery ダイアログ ボタンは無視されました。フォームの送信を続行します

Question

次のフォーム コードがあり、JavaScript コードを以下に示します。問題は、validateDialogForm() を実行すると、特定の条件が満たされると、jquery ダイアログ ボックスが表示されることです。確かにダイアログが数秒間表示されるのがわかりますが、ダイアログはそこに留まらず、フォームは引き続き送信されます。フォームを一定期間一時停止し、ユーザーが Save ボタンをクリックした場合にのみ送信するようにしたいと考えています。フォームが送信されないように、return false; 関数の終わりの前に validateDialogForm() を追加しようとしましたが、ダイアログの保存ボタンをクリックすると、フォームの送信は続行されず、そのまま残ります。ここで私は何を間違っているのでしょうか？以下のコードの現在の状態では、jquery ダイアログに関係なくフォームは送信され続けます。(清晰起见，删除很多不相關的代コード)

$('#checklist_dialog').hide();

関数 validateDialogForm() {

  $('#checklist_dialog').show();
  var isconfirmed = false;

  //STEP:1 オプション B が選択されているかどうかを確認します。
  var selectedVal = "";
  var selected = $("input[type='radio'][name='sampleChoice']:checked");

  if (selected.length > 0) {
    selectedVal = selected.val();
    console.log("選択されたオプションは " selectedVal);
  }

  if (selectedVal === "choiceB") {
    if ($("#choiceBstatus").val() === "true") {
      //ダイアログボックスを表示する
      $('#checklist_dialog').dialog({
        モーダル: true、
        最大幅: 600、
        最大高さ: 500、
        幅: 600、
        高さ: 500、
        かぶせる： {
          不透明度: 0.7、
          背景：「黒」
        }、
        ボタン: {
          "保存": function() {
            $(this).dialog('close');
            alert("クリックされたSAVEボタン内");
            $("#choiceBstatus").val("false");
            //isconfirmed = true;

            true を返します。
          }、
          "キャンセル": function() {
            $(this).dialog('close');
            alert("フォームを保存する前に、チェックリストを完了/保存する必要があります!");
            // false を返します。

          }
        }
      });
      /* e.preventDefault();
                            false を返します。 */
    } // if($("#choiceBstatus").val() == true ){の終わり

    if ($("#choiceBstatus").val() === "false") {
      // true を返します。
    }
  } // if(selectedVal === "choiceB"){ の終わり

  // false を返します。

  /* if(isconfirmed){
    
    true を返します。
  }
  それ以外 {
    false を返します。
  }
   */
}

<form id="orderForm" action="/mywebsite/order.htm" method="POST" onsubmit="return (validateOrderForm(this) &) ;& validateDialogForm())">
  <input id="choiceBstatus" name="choiceBstatus" type="hidden" value="true">
  <div id="ownerDisplayFields" style="visibility:visible;">
    <テーブルクラス="noPrint">
      //いくつかの div

      </tbody>
    </テーブル>
  </div>
  <div id="pManualTitle" style="表示: ブロック">
    <テーブルクラス="noPrint">
      <みんな>
      </tbody>
    </テーブル>
  </div>
  <div id="checklist_dialog" title="新しいタイトル" style="表示: なし;">

    <p>チェックリスト 1 はここにあります</p>
    <p>チェックリスト 2 はここにあります </p>


  </div>

  <テーブルクラス="noPrint">
    <みんな>
      <tr>

        <td align="center"><br>
          <input class="button" type="submit" name="save" value="保存"> - <input class="button" type="submit" name="cancel" value="Cancel" onclick="bCancel = true;">


        </td>
      </tr>
    </tbody>
  </テーブル>

  <div></div>
</form>

Answer 1

コメントで述べたように、ダイアログ ボックスは UI をブロックしないため、ダイアログ ボックスが表示されているときはフォームの送信を防止する必要があります。停止しない限り送信は続行されます。ダイアログボックスのボタンを押すと、実際にフォームを送信できます。

ここで注意が必要なのは、実際にフォームを送信すると、onsubmit 関数も再度トリガーされることです。良い方法は、フラグを設定することです。基本的に希望どおりの動作を行う以下の疑似コードを参照してください。

リーリー リーリー