2012-10-22 3 views
2

다음 코드는 작동하지 않습니다. 이 일로 나를 도울 수 있기를 바랍니다.jQuery 양식 제출

기본적으로 양식을 제출하기 전에 먼저 jQuery Dialog를 사용하여 확인하고 싶은 양식이 있습니다. 그래서 제출을 클릭하면 대화 상자가 나타나지만 아무 것도 확인하지 않으려면 예를 누릅니다 !!

$(function() { 

     $('#massform').submit(function(e){ 
      e.preventDefault(); 
      $('#dialog-mass-confirm').dialog('open'); 
     }); 


     $("#dialog-mass-confirm").dialog({ 
      autoOpen: false, 
      resizable: false, 
      draggable: false, 
      height:180, 
      modal: true, 
      buttons: { 
       "No": function() { 
        $(this).dialog("close"); 
       }, 
       "Yes": function() { 
        $("#massform").submit(); 
       } 
      } 
     }); 
    }); 

<form id="massform" method="post" action="new.php"> 
    <input type="text" name="email" size="41"> 
    <input type="submit" value="Submit"> 
</form> 
+0

예를 누르면 e.preventDefault()가 호출됩니까? – Douglas

+0

콘솔에 아무것도 있습니까? 또한 청취자 onsubmit을 사용하면 팝업 대화 상자에서 이벤트를 호출 할 때도 기본 동작을 방지 할 수 있습니다. – Alfabravo

+0

, 더글러스, 예 - 알아낼 수 있습니다. – user1766734

답변

0

당신이 첫번째 장소에있는 모달을 열어 같은 이벤트가 발생합니다 모달에서 제출 호출 후 폼의 제출 기능을 리 바인딩하고 있기 때문에 당신이 순환 참조가있을 수 있습니다 것으로 보인다. 나는이 문제를 방지하려면 다음 사항을 건의 할 것입니다 :

$(function() { 

    $('#submitButton').click(function(e){ 
     e.preventDefault(); 
     $('#dialog-mass-confirm').dialog('open'); 
    }); 


    $("#dialog-mass-confirm").dialog({ 
     autoOpen: false, 
     resizable: false, 
     draggable: false, 
     height:180, 
     modal: true, 
     buttons: { 
      "No": function() { 
       $(this).dialog("close"); 
      }, 
      "Yes": function() { 
       $("#massform").submit(); 
      } 
     } 
    }); 
}); 

<form id="massform" method="post" action="new.php"> 
    <input type="text" name="email" size="41"> 
    <input ID="submitButton" type="button" value="Submit"> 
</form> 
+0

당신은 맞지만 여전히 추가해야합니다. 제출 버튼을 클릭했을 때 양식이 제출되지 않도록하려면 다음을 수행하십시오. – user1766734

+0

예제에서 "Submit"값을 가진 버튼은 더 이상 제출 유형이 아니라 버튼 유형입니다. 따라서 양식을 제출하지 않고 모달을여십시오. – CrazyWebDeveloper

0

당신은 범위와 당신이 직면하고있는 문제를 이해 있도록 더 자세히 trigering 이벤트를 찾아 놈이야. 1. 양식 제출 이벤트에 바인딩 된 jqery 함수를 만들었습니다.

$('#massform').submit(function(e){ 
      e.preventDefault(); 
      $('#dialog-mass-confirm').dialog('open'); 
     }); 

제출 버튼을 사용하면 이벤트가 시작되고 대화 상자가 열립니다. 그러나 양식을 제출할 때

  "Yes": function() { 
      $("#massform").submit(); 

이전에 지적 된 바운드 기능을 발동합니다. 양식 자체가 제출되지 않도록합니다. 정확하게하려면 대화 상자를 다시 열면됩니다. 하지만 그렇게 빨리 일어나서 눈치 채지 못합니다. 당신이 제출에 잠금을 설정할 수 있습니다 동안 호환성을 위해 제출 작업을 사용하도록 강요하는 경우 ... 당신은 더러운 일을 할 수있는 LOC 변수를 사용할 수

...

$('#massform').submit(function(e, lock){ 
    if(lock) 
    e.preventDefault(); 
    $('#dialog-mass-confirm').dialog('open'); 
}); 

. 그 방법을 시도한 적이 없지만 작동해야합니다. 나는 보통 문서 준비 범위의 변수를 사용한다.

양식을 수정할 수 없을 때 더러운 해결책입니다. 추악하지만 작동합니다.