jQuery - uniemożliwić domyślne, a następnie kontynuować domyślne

Question

Mam formularz, który po przesłaniu, muszę wykonać dodatkowe przetwarzanie przed wysłaniem formularza. Mogę zapobiec domyślnemu zachowaniu się przy składaniu formularzy, a następnie przeprowadzić dodatkowe przetwarzanie (to zasadniczo wywołanie interfejsu API serwisu Mapy Google i dodanie kilku ukrytych pól do formularza), a następnie potrzebuję formularza do przesłania.

Czy istnieje sposób, aby "zapobiec domyślnie", a następnie jakiś punkt "kontynuować domyślnie?"

Answer 1

Chciałbym po prostu zrobić ..

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

połączenia preventDefault w pierwszym i używać submit() funkcja później .. jeśli u wystarczy przesłać formularz

Answer 2

można użyć e.preventDefault() który zatrzyma bieżącą operację .

niż można zrobić $("#form").submit();

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

Answer 3

Kiedy wiążą zdarzenie .submit() do formularza, i robisz, co chcesz zrobić przed powrotem (true), te rzeczy dzieją się przed faktycznym złożeniem.

Na przykład:

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

Simple example

Innym przykładem na jquery.com: http://api.jquery.com/submit/#entry-examples

Answer 4

Stosując ten sposób można zrobić nieskończoną pętlę na Twoje JS. zrobić lepszy sposób można użyć następujących

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. 

Mam nadzieję, że to pomaga! Dzięki!

Answer 5

Zastosowanie jQuery.one()

Dołączanie do obsługi zdarzenia dla elementów. Handler jest wykonywany co najwyżej raz na element od rodzaju zdarzenia

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

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

Czyni to, co chcesz i nie musisz się martwić o wielokrotności złożenia.

Answer 6

„zastrzyk Walidacja bez submit zapętlenie”:

Chcę tylko sprawdzić Odśwież i kilka innych rzeczy przed walidacji HTML5, więc zrobiłem coś takiego (funkcja walidacji zwraca true lub 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

W czysty sposób JavaScript można przesłać formularz po zablokowaniu domyślnego.

Dzieje się tak, ponieważ HTMLFormElement.submit()never calls the onSubmit(). Tak więc polegamy na tym dziwactwie specyfikacji, aby przesłać formularz tak, jakby nie miał on niestandardowego programu obsługi onsubmit.

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

Aby uzyskać synchroniczne żądanie, patrz this fiddle.

---

Oczekiwanie na żądanie asynchronicznym skończyć jest równie proste:

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

Można sprawdzić moje skrzypce na example asynchronicznej życzenie.

---

A jeśli jesteś w dół z obietnic:

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

i oto that request.