jQuery - ngăn chặn mặc định, sau đó tiếp tục mặc định

Question

Tôi có một biểu mẫu, khi được gửi, tôi cần thực hiện một số quy trình bổ sung trước khi gửi biểu mẫu. Tôi có thể ngăn chặn hành vi gửi biểu mẫu mặc định, sau đó thực hiện xử lý bổ sung của tôi (về cơ bản nó gọi API Google Maps và thêm một vài trường ẩn vào biểu mẫu) - và sau đó tôi cần biểu mẫu để gửi.

Có cách nào để "ngăn chặn mặc định" không, sau đó một số điểm sau "tiếp tục mặc định?"

Answer 1

tôi chỉ sẽ làm gì ..

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

gọi preventDefault lúc đầu và sử dụng submit() chức năng sau .. nếu u chỉ cần gửi biểu mẫu

Answer 2

Bạn có thể sử dụng e.preventDefault() mà sẽ ngăn chặn các hoạt động hiện tại .

hơn bạn có thể làm $("#form").submit();

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

Answer 3

Khi bạn liên kết các sự kiện .submit() mẫu, và bạn làm những điều bạn muốn làm trước khi trở về (true), những điều này xảy ra trước thời điểm nộp hồ sơ thực tế.

Ví dụ:

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

Simple example

Một ví dụ khác về jquery.com: http://api.jquery.com/submit/#entry-examples

Answer 4

Sử dụng cách này bạn sẽ làm một vòng lặp vô tận trên JS của bạn. để thực hiện tốt hơn cách bạn có thể sử dụng sau đây

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. 

Tôi hy vọng điều đó sẽ hữu ích! Cảm ơn!

Answer 5

Sử dụng jQuery.one()

Đính kèm một handler cho sự kiện cho các yếu tố. Xử lý được thực hiện tối đa một lần cho mỗi phần tử mỗi loại sự kiện

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

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

Nó không những gì bạn muốn và bạn không cần phải lo lắng về nhiều trình.

Answer 6

"tiêm Validation mà không submit looping":

Tôi chỉ muốn kiểm tra reCaptcha và một số nội dung khác trước khi xác nhận HTML5, vì vậy tôi đã làm một cái gì đó như thế (các chức năng xác nhận trả về true hoặc 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

Theo cách Javascript thuần túy, bạn có thể gửi biểu mẫu sau khi ngăn chặn mặc định.

Điều này là do HTMLFormElement.submit()never calls số onSubmit(). Vì vậy, chúng tôi đang dựa vào đặc điểm kỹ thuật đó để gửi biểu mẫu như thể nó không có trình xử lý tùy chỉnh ở đây.

var submitHandler = (event) => { 
    event.preventDefault() 
    console.log('You should only see this once') 
    document.getElementById('formId').submit() 
} 

Xem this fiddle để có yêu cầu đồng bộ.

---

Chờ một yêu cầu async để kết thúc chỉ là dễ dàng:

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

Bạn có thể kiểm tra fiddle của tôi cho một example của một yêu cầu không đồng bộ.

---

Và nếu bạn là xuống với lời hứa:

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') 
} 

Và đây là that request.