0

フォームを確認するために jQuery モーダル ダイアログを追加しようとしています。周りを検索して、有望に見え、機能しているように見えるコードを見つけました。ダイアログがポップアップし、確認するとフォームが送信されます。ただし、$_POST 配列は空です。

ここで、e.preventDefault() 関数を無効にすると、post 配列は問題ありません。しかし、その後、ダイアログは開いたままになりません。コードをいじってみましたが、修正できませんでした。以下は、簡略化されたページ コードです。

<?php
   print_r($_POST);
?>
<html>
<head>
   <script type="text/javascript" src="jquery-1.9.1.js"></script>
   <script type="text/javascript" src="jquery-ui-1.10.1.custom.js"></script>
   <link rel="stylesheet" href="jquery-ui.css">
</head>
<body>
   <form name="formAnnList" id="formAnnList" method="post">
      <input name="btn_delete" type="submit" class="button" value="Delete">
   </form>

   <!-- Delete confirmation dialog -->
   <div id="delDialog" title="Confirmation">
      <p>
         <span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 0 0;"></span> 
         Are you sure
      </p>
   </div>

   <script type="text/javascript">
   $(function(){       
      $('#delDialog').dialog({
         autoOpen: false,
         width: 280,
         modal: true,
         resizable: false,
         buttons: {
            "Ok": function(){ document.formAnnList.submit(); },
            "Cancel": function(){ $(this).dialog("close"); }
         }
      });

      $('form#formAnnList').submit(function(e){
         e.preventDefault();
         $('#delDialog').dialog('open');
      });
   });
   </script>
</body>
</html>

どんなアイデアでも大歓迎です。
敬具、
ジョージ

4

2 に答える 2

0

あなたの入力のおかげで、私はそれを理解しました。preventDefault() はフォーム データを一掃するため、フォームを同時に送信する要素によってダイアログをトリガーしないようにします。そこで、type="button" のボタンを作成し、id="btn_delete_confirm" を付けました。クリックするとダイアログが開き、ダイアログを確認するとフォームが送信されます。$_POST 配列で送信される削除イベントとして機能する隠しボタンをフォームに追加しました。

これが機能する変更されたコードです。$_POST 配列に、反応できる非表示のボタンが含まれていることがわかります。 

  <?php
     print_r($_POST);
  ?>
  <html>
     <head>
        <script type="text/javascript" src="jquery-1.9.1.js"></script>
        <script type="text/javascript" src="jquery-ui-1.10.1.custom.js"></script>
        <link rel="stylesheet" href="jquery-ui.css">
     </head>
     <body>
        <form name="formAnnList" id="formAnnList" method="post">
           <input id="btn_delete_confirm" type="button" class="button" value="Delete">
           <input name="btn_delete" type="hidden" class="button" value="Delete">
        </form>

        <!-- Delete confirmation dialog -->
        <div id="delDialog" title="Confirmation">
           <p>
              <span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 0 0;"></span> 
              Are you sure
           </p>
        </div>

        <script type="text/javascript">
        $(function(){       
           $('#delDialog').dialog({
              autoOpen: false,
              width: 280,
              modal: true,
              resizable: false,
              buttons: {
                 "Ok": function(){ document.formAnnList.submit(); },
                 "Cancel": function(){ $(this).dialog("close"); }
              }
           });

           $('input#btn_delete_confirm').click(function(){
              $('#delDialog').dialog('open');
           });
        });
        </script>
     </body>
  </html>

再度、感謝します。プロに相談するといつも助かります。
敬具、
ジョージ

于 2013-05-01T11:44:33.813 に答える
0

preventDefault()データを送信するメソッドを停止するため、空です。これを変更して、データをシリアル化できます。

$("#formAnnList").serialize();

ajax または post メソッドを使用して手動で送信します。


何か（テストされていない）：

...
buttons: {
            "Ok": function(){
                 $.ajax({
                     url: //url here
                     data: $("#formAnnList").serialize()
                 })
            },
            ...
         }

preventDefault から jQueryドキュメント:

このメソッドが呼び出された場合、イベントのデフォルト アクションはトリガーされません。

于 2013-04-30T19:23:16.277 に答える