使用fancybox來允許/阻止表單提交

下面是我用來試圖阻止/允許用戶單擊提交按鈕後提交表單的jQuery。這個想法將是一個fancybox模式對話框窗口與用戶輸入審查數據。如果他們像他們一樣點擊Looks Good!並將表單提交回ASP MVC3控制器。如果不是，由於e.preventDefault方法已被調用，模式窗口關閉，他們可以重新輸入數據。使用fancybox來允許/阻止表單提交

問題是，顯然現在我寫這個，如果用戶對他們輸入的數據感到滿意，整個事情將進入無限循環，因爲我是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(); 
}

來源

2013-08-19 NealR

我建議增加一個屬性或設置窗體上的一個隱藏的價值與你的第一關，然後在第二遍，如果設置，也可能點擊「看起來不錯「您可以通過http://api.jquery.com/submit/按照正常方式提交 –

既然你防止默認情況下，那麼你可能需要通過AJAX到submit的形式，以避免循環。我認爲這會做的伎倆：

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

注意我添加ID S到form還有buttons到提交或取消這樣我就可以綁定事件，所有這些選擇。另外請注意，我使用afterShow回調將我的按鈕內的click事件綁定在fancybox中。

有用的信息：Ajax serialize docs

注意：.on()需要的jQuery V1.7 +

編輯：你實際上可以在您的確認條件，替換該行

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

通過這一個：

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

所以一切看起來更加一致;）

來源

2013-08-19 20:24:12 JFK

使用fancybox來允許/阻止表單提交

回答

相關問題