Подтвердить что ты не робот

JQuery - предотвращать дефолт, а затем продолжать по умолчанию

У меня есть форма, которая при отправке мне нужна дополнительная обработка, прежде чем она представит форму. Я могу предотвратить поведение отправки формы по умолчанию, а затем выполнить свою дополнительную обработку (она в основном вызывает API Карт Google и добавляет несколько скрытых полей в форму), а затем мне нужна форма для отправки.

Есть ли способ "предотвратить по умолчанию", затем какой-то пункт "продолжить по умолчанию?"

4b9b3361

Ответ 1

Когда вы привязываете событие .submit() к форме и делаете то, что хотите сделать, прежде чем возвращать (true), все это происходит до фактического представления.

Например:

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

Простой пример

Еще один пример на jquery.com: http://api.jquery.com/submit/#entry-examples

Ответ 2

Используйте jQuery.one()

Присоедините обработчик к событию для элементов. Обработчик выполняется не более одного раза для каждого элемента для каждого типа события

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

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

Он делает то, что вы хотите, и вам не нужно беспокоиться о множественной отправке.

Ответ 3

Я бы просто сделал.

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

сначала вызовите preventDefault и используйте функцию submit() позже. Если вам просто нужно отправить форму

Ответ 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 all ok.
    $(this).submit();
}

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

Надеюсь, это поможет! Спасибо!

Ответ 5

Это, IMHO, самое универсальное и надежное решение (если ваши действия инициируются пользователем, например, "пользователь нажимает кнопку"):

  • при первом вызове обработчика check ВОЗ его запустила:
    • если пользователь пометил его - делайте свое дело, а затем запускайте его снова (если хотите) - программно
    • в противном случае - ничего не делать (= "продолжить по умолчанию")

В качестве примера обратите внимание на это элегантное решение для добавления "Вы уверены?" всплыть на любую кнопку, просто украсив кнопку с атрибутом. Мы условно продолжим поведение по умолчанию, если пользователь не откажется.

1. Добавьте к каждой кнопке, которую мы хотим, всплывающее окно с предупреждением: "Вы уверены?":

<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. Прикрепите обработчики ко ВСЕМ таким кнопкам:

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

Это.

Ответ 6

С jQuery и небольшим вариантом ответа @Joepreludian выше:

Важные моменты, которые следует иметь в виду:

  • .one(...) вместо .on(...) or.submit(...)
  • named функция вместо anonymous function так как мы будем ссылаться на нее в 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...
    }
});

Вы можете изменить значение переменной allIsWell в приведенном ниже фрагменте на true или false чтобы проверить функциональность:

$('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>

Ответ 7

Вы можете использовать e.preventDefault(), который остановит текущую операцию.

чем вы можете сделать $("#form").submit();

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

Ответ 8

В чистом виде Javascript вы можете отправить форму после предотвращения по умолчанию.

Это связано с тем, что HTMLFormElement.submit() никогда не вызывает onSubmit(). Поэтому мы полагаемся на эту странность спецификации, чтобы отправить форму, как будто у нее нет пользовательского обработчика onsubmit.

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

См. эту скрипту для синхронного запроса.


Ожидание завершения асинхронного запроса так же просто:

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

Вы можете проверить мою скрипту на пример асинхронного запроса.


И если вы не используете promises:

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

И здесь этот запрос.

Ответ 9

"Ввод проверки без конвейера отправки":

Я просто хочу проверить reCaptcha и некоторые другие вещи до проверки HTML5, поэтому я сделал что-то вроде этого (функция validation возвращает 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();

   });
});

Ответ 10

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

  // Do some stuff here
  ...

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