Gönderildiğinde, formu göndermeden önce bazı ek işlemler yapmam gereken bir formum var. Varsayılan form gönderme davranışını önleyebilirim, ardından ek işlemlerimi yapabilirim (temelde Google Haritalar API'sini çağırıyor ve forma birkaç gizli alan ekliyor) - ve sonra göndermem için forma ihtiyacım var.

"Varsayılanı engellemenin" bir yolu var mı, daha sonra bir nokta "varsayılana devam et" mi?

Kullanım jQuery.one()

Öğeler için bir olaya bir işleyici ekleyin. İşleyici, olay türü başına öğe başına en fazla bir kez yürütülür

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

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

oneBu özel submitolay ilk gönderimden sonra çıkarıldığından, sonsuz döngüyü de engellemenin kullanımı .

.submit()Olayı forma bağladığınızda ve geri dönmeden önce yapmak istediğiniz şeyleri yaptığınızda (doğru), bunlar gerçek gönderimden önce gerçekleşir.

Örneğin:

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

Basit örnek

Jquery.com'daki başka bir örnek: http://api.jquery.com/submit/#entry-examples

Sadece yapardım:

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

preventDefaultİlk önce arayın ve submit()daha sonra formu göndermeniz gerekiyorsa işlevi kullanın

Bu şekilde kullanarak JS'nizde sonsuz bir Döngü yapacaksınız. daha iyi bir yol yapmak için aşağıdakileri kullanabilirsiniz

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.

Umut ediyorum bu yardım eder! Teşekkürler!

Bu, IMHO, en genel ve sağlam çözümdür (eylemleriniz kullanıcı tarafından tetikleniyorsa, örneğin 'kullanıcı bir düğmeyi tıklarsa'):

• işleyiciye ilk kez çek denildiğinde, WHO tarafından tetiklendi:
  • Eğer bir kullanıcı tigging yaptıysa - işinizi yapın ve sonra tekrar tetikleyin (isterseniz) - programlı olarak
  • aksi takdirde - hiçbir şey yapma (= "varsayılana devam et")

Örnek olarak, "Emin misiniz?" herhangi bir düğmeyi bir öznitelikle süsleyerek açılır. Kullanıcı vazgeçmezse koşullu olarak varsayılan davranışa devam edeceğiz.

1. İstediğimiz her düğmeye "emin misiniz" açılır penceresinden bir uyarı metni ekleyelim:

<button class="btn btn-success-outline float-right" type="submit"  ays_text="You will lose any unsaved changes... Do you want to continue?"                >Do something dangerous</button>

2. İşleyicileri bu tür TÜM düğmelere ekleyin:

$('button[ays_text]').click(function (e, from) {
    if (from == null) {  // user clicked it!
        var btn = $(this);
        e.preventDefault();
        if (confirm() == true) {
            btn.trigger('click', ['your-app-name-here-or-anything-that-is-not-null']);
        }
    }
    // otherwise - do nothing, ie continue default
});

Bu kadar.

$('#myform').on('submit',function(event){
  // block form submit event
  event.preventDefault();

  // Do some stuff here
  ...

  // Continue the form submit
  event.currentTarget.submit();
});

İle jQueryve @ Joepreludian cevabı yukarıda küçük bir varyasyonu:

Unutulmaması gereken önemli noktalar:

• .one(...) bunun yerine .on(...) or .submit(...)
• namedyerine işlev anonymous functionbiz içinde bunu atıfta olacak beri callback.

$('form#my-form').one('submit', function myFormSubmitCallback(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    var $this = $(this);
    if (allIsWell) {
        $this.submit(); // submit the form and it will not re-enter the callback because we have worked with .one(...)
    } else {
        $this.one('submit', myFormSubmitCallback); // lets get into the callback 'one' more time...
    }
});

Sen değerini değiştirebilirsiniz allIsWellSnippet'te altında değişken trueveya falseişlevselliğini sınamak için:

$('form#my-form').one('submit', function myFormSubmitCallback(evt){
  evt.stopPropagation();
  evt.preventDefault();
  var $this = $(this);
  var allIsWell = $('#allIsWell').get(0).checked;
  if(allIsWell) {
    $this.submit();
  } else {
    $this.one('submit', myFormSubmitCallback);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/" id="my-form">
  <input name="./fname" value="John" />
  <input name="./lname" value="Smith" />
  <input type="submit" value="Lets Do This!" />
  <br>
  <label>
    <input type="checkbox" value="true" id="allIsWell" />
    All Is Well
  </label>
</form>

İyi şanslar...

Tam bir Javascript biçiminde, varsayılanı engelledikten sonra formu gönderebilirsiniz.

Bunun nedeni HTMLFormElement.submit() hiç aramazonSubmit() . Bu nedenle, formu burada özel bir gönderme işleyicisi yokmuş gibi göndermek için bu spesifikasyon tuhaflığına güveniyoruz.

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

Eşzamanlı bir istek için bu kemana bakın .

Eşzamansız bir isteğin tamamlanmasını beklemek de aynı derecede kolaydır:

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

Eşzamansız bir istek örneği için kemanıma bakabilirsiniz .

Ve eğer vaatlerde bulunursan:

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

Ve işte bu istek .

e.preventDefault()Mevcut işlemi durduracak olanı kullanabilirsiniz .

yapabileceğinden daha fazla$("#form").submit();

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

"Döngü göndermeden doğrulama enjeksiyonu":

HTML5 doğrulamasından önce reCaptcha'yı ve diğer bazı şeyleri kontrol etmek istiyorum, bu yüzden böyle bir şey yaptım (doğrulama işlevi doğru veya yanlış döndürür):

$(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();

   });
});