jQuery preventdefault clear $ _POST

jQuery 모달 대화 상자를 추가하여 양식을 확인하려고합니다. 주변을 검색하여 유망 해 보이고 또한 작동하는 것으로 보이는 코드를 발견했습니다. 대화 상자가 나타나면이를 확인하고 양식을 제출합니다. 그러나 $ _POST 배열은 비어 있습니다.

이제 e.preventDefault() 함수를 비활성화하면 게시물 배열이 좋습니다. 하지만 대화 상자가 열리지 않습니다. 나는 코드를 가지고 놀았지만 그것을 고칠 수 없었다. 여기에 옷을 벗었 페이지 코드는 다음과 같습니다

<?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>

모든 아이디어를 환영합니다.
안부,
조지

출처

2013-04-30 George

양식은 (버튼 제외)에는 입력이 없기 때문에'$ _POST'가 비어 아니었다면 그것이 이상한 것이다. – zeroflagL

btn_delete는 배열에 있어야합니다. – George

버튼 값은 클릭 할 때만 제출됩니다. 'document.formAnnList.submit()'은 버튼을 클릭하지 않습니다;) – zeroflagL

그것은 비어 있기 때문에 데이터를 제출하기위한 preventDefault() 정지하는 방법. 데이터를 serialize하려면 다음을 수정하십시오.

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

그런 다음 ajax 또는 post 메서드를 사용하여 수동으로 전송하십시오. (테스트하지)

뭔가 : jQuery를 documentation에서

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

로 preventDefault :이 메소드가 호출되면

, 이벤트의 기본 동작 이 실행되지 않습니다.

출처

2013-04-30 19:23:16 WooCaSh

OP 코드를 다시 읽는 것이 좋습니다. – zeroflagL

팝업을 깜빡 했나요? 아니면 다른 것을 놓쳤는가? – WooCaSh

'document.formAnnList.submit()'- 사용자가 ok 버튼을 클릭하자마자 폼이 제출됩니다. ^^ – zeroflagL

귀하의 의견에 감사드립니다. preventDefault()가 양식 데이터를 지우는 방식이므로 양식을 동시에 제출하는 요소가 대화 상자를 트리거하지 않는 것이 좋습니다. 그래서 type = "button"버튼을 만들고 id = "btn_delete_confirm"이라고했습니다. 이를 클릭하면 대화 상자가 열리고 대화 상자가 양식을 제출할 것임을 확인합니다. 방금 $ _POST 배열에서 전송 된 delete 이벤트로 작동하는 양식에 숨겨진 단추를 추가했습니다.

다음은 변경된 코드입니다. 당신은 $ _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-01 11:44:33 George

답변

관련 문제