양식 제출을 허용/금지하기 위해 fancybox 사용

Question

다음은 사용자가 제출 버튼을 클릭하면 양식 제출을 방지/허용하기 위해 사용하는 jQuery입니다. 아이디어는 사용자가 검토를 위해 입력 한 데이터와 함께 fancybox 모달 대화 상자 창을 표시하는 것입니다. 사용자가 Looks Good!을 클릭하면 양식이 ASP MVC3 컨트롤러에 다시 제출됩니다. 그렇지 않은 경우 e.preventDefault 메서드가 이미 호출되었으므로 모달 창이 닫히고 데이터를 다시 입력 할 수 있습니다.

문제는 사용자가 입력 한 데이터가 만족 스럽다면 무언가 반복 될 것입니다. Look's Good! 단추가 표시되는 메서드를 호출하기 때문입니다. 그것은 처음부터.

submit() 함수 내에 "독립형"메서드를 만드는 방법이있어서 이벤트 객체에 액세스 할 수 있고, 그렇지 않은 경우 양식을 제출할 수있는 더 나은 방법이 될 수 있습니다. Look's Good! 버튼을 클릭 한 후 기본적를 방지하기 때문에

//Form submit functions 
    $('form').submit(function (e) { 
     e.preventDefault(); 
     if ($('#AccountNumber').val() != $('#doubleaccount').val()) { 

      alert("Please re-enter the correct account number!"); 
     } else { 
      var display = "<h1>Test</h1>" + 
          "<input type='button' value='Looks Good!' onclick='submit()'/>" + 
          "<input type='button' value='Try Again...' onclick='cancel()'/>"; 
      $.fancybox(display, { 
       // fancybox API options 
       fitToView: false, 
       autoScale: true, 
       autoDimension: true, 
       closeClick: true, 
       openEffect: 'fade', 
       closeEffect: 'fade', 
       closeBtn: true, 
       openSpeed: 'fast', 
       closeSpeed: 'fast' 
      }); 
     } 
    }); 
});//End doc.ready() 

function submit() { 
    $('form').submit(); 
} 

function cancel() { 
    $.fancybox.close(); 
} 

Answer 1

는, 당신은 루프를 피하기 위해 아약스를 통해 양식을 submit해야 할 수도 있습니다. 나는이 트릭을 할 것이라고 생각 : 나는 buttons에뿐만 아니라 form에 ID의 추가

function submitForm(){ 
    jQuery.ajax({ 
    cache: false, 
    type: "POST", 
    url: "process.asp", // your controller 
    data: jQuery("#myForm").serialize(), // serialize form with id="myForm" 
    success: function(data){ 
     jQuery.fancybox("form successfully submitted"); // confirmation message 
     jQuery('#myForm')[0].reset(); // clear form fields 
    } 
    }); 
} 
jQuery(function($) { 
    $("#myForm").on("submit", function(e){ 
    e.preventDefault(); 
    if ($('#AccountNumber').val() != $('#doubleaccount').val()) { 
     // validation : something went wrong 
     alert("Please re-enter the correct account number!"); 
    } else { 
     var display = "<h1>Test</h1>" + 
        "<input id='submit' type='button' value='Looks Good!'/>" + 
        "<input id='cancel' type='button' value='Try Again...'/>"; 
     $.fancybox(display,{ 
     // other API options 
     afterShow: function(){ 
      $("#submit, #cancel").on("click", function(event){ 
       if($(event.target).is("#submit")){ 
       submitForm(); 
       } 
       $.fancybox.close(); 
      }); 
     } 
     }); // fancybox 
    } 
    }); // on submit 
}); // ready 

공지 사항이 또는 그래서 난 모든 선택기에 이벤트를 바인딩 할 수 있습니다을 취소 제출합니다. 또한 콜백을 사용하여 fancybox의 내 버튼에 click 이벤트를 바인딩합니다. Ajax serialize docs

참고을 : .on()이의 jQuery V1.7 +

편집이 필요합니다 읽을

유용한 당신은 실제로 조건 유효성 검사에이 라인을 대체 할 수

alert("Please re-enter the correct account number!"); 

로 이 하나 :

$.fancybox("Please re-enter the correct account number!");