jQuery - 防止默認，然後繼續默認

Question

我有一個表單，提交時，我需要做一些額外的處理之前，它應該提交表單。我可以防止默認的表單提交行爲，然後做我的額外處理（它基本上調用Google Maps API並向窗體添加一些隱藏字段） - 然後我需要提交表單。

有沒有辦法「防止默認」，然後稍後再點「繼續默認？」

Answer 1

我只想做..

$('#submiteButtonID').click(function(e){ 
    e.preventDefault(); 
    //do ur stuff. 
    $('#formId').submit(); 
}); 

呼叫preventDefault在第一和使用submit()功能後..如果u只需要提交表單

Answer 2

您可以使用e.preventDefault()將停止當前操作。

比你可以做$("#form").submit();

$('#form').submit(function (e) 
{ 
    return !!e.submit; 
}); 
if(blabla...) 
{... 
} 
else 
{ 
    $('#form').submit(
    { 
     submit: true 
    }); 
} 

Answer 3

當您綁定的.submit()事件的形式，並在返回（真）之前，做你想做的事情，這些事情發生之前，實際提交。

例如：

$('form').submit(function(){ 
    alert('I do something before the actual submission'); 
    return true; 
}); 

Simple example

又如上jquery.com：http://api.jquery.com/submit/#entry-examples

Answer 4

使用這種方式你會做一個死循環對你的JS。 做你可以使用更好的方法如下

var on_submit_function = function(evt){ 
    evt.preventDefault(); //The form wouln't be submitted Yet. 
    (...yourcode...) 

    $(this).off('submit', on_submit_function); //It will remove this handle and will submit the form again if it's all ok. 
    $(this).submit(); 
} 

$('form').on('submit', on_submit_function); //Registering on submit. 

我希望它能幫助！ 謝謝！

Answer 5

使用jQuery.one()

附加的處理程序爲元素的事件。該處理程序最多各事件類型

$('form').one('submit', function(e) { 
    e.preventDefault(); 
    // do your things ... 

    // and when you done: 
    $(this).submit(); 
}); 

它做你想要什麼，你不必擔心多次提交執行每一次元素。

Answer 6

「驗證注沒有提交循環」：

我只是想檢查的reCAPTCHA和HTML5驗證之前一些其他的東西，所以我做了類似的東西（驗證函數返回true或false）：

$(document).ready(function(){ 
    var application_form = $('form#application-form'); 

    application_form.on('submit',function(e){ 

     if(application_form_extra_validation()===true){ 
      return true; 
     } 

     e.preventDefault(); 

    }); 
}); 

Answer 7

以純Javascript方式，您可以在防止默認情況下提交表單。

這是因爲HTMLFormElement.submit()never calls的onSubmit()。所以我們依靠這個規範怪異的方式來提交表單，就好像它沒有自定義的onsubmit處理器一樣。對於同步請求，請參見this fiddle。

---

等待異步請求的完成起來也很簡單：

var submitHandler = (event) => { 
    event.preventDefault() 
    console.log('before') 
    setTimeout(function() { 
    console.log('done') 
    document.getElementById('formId').submit() 
    }, 1400); 
    console.log('after') 
} 

您可以檢查出我的小提琴異步請求的example。

---

如果你是來與承諾：

var submitHandler = (event) => { 
    event.preventDefault() 
    console.log('Before') 
    new Promise((res, rej) => { 
     setTimeout(function() { 
     console.log('done') 
     res() 
     }, 1400); 
    }).then(() => { 
     document.getElementById('bob').submit() 
    }) 
    console.log('After') 
} 

而這裏的that request。