Jquery 모달 대화 상자 및 양식 제출

Question

저장하기 전에 사용자에게 확인 대화 상자를 표시해야하는 양식이 있습니다. 대화 상자가 닫히지 양식이 제출되지 -

$("#my_form").submit(function(e) { 
    if ($("#id").val() > 0) { 
     var $dialog = $('<div></div>') 
      .html('Are you sure?') 
      .dialog({ 
       autoOpen: false, 
       title: 'Save New Invoice', 
       modal: true, 
       buttons: { 
        "OK": function() { 
         $dialog.dialog('close'); 
         $("#my_form").submit(); 
        }, 
        Cancel: function() { 
         $(this).dialog("close");    
        } 
       } 
      }); 
     $dialog.dialog('open'); 
     e.preventDefault(); 
     return false; 
    }  
}); 

그러나, OK 버튼이 제대로 작동하지 않습니다

나는 다음과 같은 형태는 기능을 제출 차단하여이 작업을 수행했다.

다음과 같이 확인 기능을 변경하면 대화 상자가 닫히고 경고가 표시됩니다.

"OK": function() { 
    $dialog.dialog('close'); 
    alert('form will be submitted'); 
}, 

그래서, 나는 이것이 $("#my_form").submit(); 방법을 함께 할 수있는 뭔가 것으로 추측하고있다.

Answer 1

양식 제출 기능을 계속해서 호출하는 것과 같지 않습니까? 기능을 제출하기 위해 함수를 첨부하는 것을 보았습니다. 제출을 다시 호출하면 동일한 함수가 호출됩니다.

$ ("# invoice_edit_form")은 다른 양식입니다. 한 양식에 다른 양식을 제출 하시겠습니까?

Answer 2

문제는 전송 처리기가 항상 false을 반환하고 e.preventDefault()도 양호한 조치를 취해야한다는 것입니다. 이 두 가지 모두 사용자가 확인 또는 취소를 클릭했는지 여부에 관계없이 양식 제출을 중지합니다.

양식 제출이 아닌 단추 클릭 (또는 다른 이벤트)에 모달 확인이 표시되도록 논리를 변경해야합니다. 그런 다음 사용자가 확인을 클릭하면 양식 'submit()'을 호출 할 수 있습니다.

$("#submitButton").click(function(e) { 
    if ($("#id").val() > 0) { 
     var $dialog = $('<div></div>') 
      .html('Are you sure?') 
      .dialog({ 
       autoOpen: false, 
       title: 'Save New Invoice', 
       modal: true, 
       buttons: { 
        "OK": function() { 
         $dialog.dialog('close'); 
         $("#my_form").submit(); 
        }, 
        Cancel: function() { 
         $(this).dialog("close");    
        } 
       } 
      }); 
     $dialog.dialog('open'); 
    }  
});