Блог

Главная - Вопросы по программированию - Отправка формы из события javascript, а не действия формы

Отправка формы из события javascript, а не действия формы

#javascript #html #forms

Вопрос:

Хорошо, это может быть немного запутанный вопрос, но в любом случае: у меня есть форма, ориентированная на внешний URL-адрес для проверки.

 <form
  id="form1"
  name="form1"
  class="formclass"
  accept-charset="UTF-8"
  autocomplete="off"
  enctype="multipart/form-data"
  method="post"
  novalidate
  action="https://www.external_url.com"
  >

Тем не менее, я хочу что-то сделать в то время, когда пользователь нажимает кнопку «Отправить», и форма отправляется на внешний URL-адрес.
По сути, я пытаюсь достичь этого, удалив действие из формы и создав обработчик событий:

 button=document.getElementById("SubmitButton");
button.addEventListener('click', submitaction);

function submitaction() {
// Do something and THEN submit it to external URL
}

Когда я закончу «что-то делать» (например, возможно, чтобы отобразить предупреждение перед его отправкой), я хочу взять всю форму и отправить ее на внешний.
Что мне нужно сделать, чтобы получить тот же результат, что и действие в форме?

Спасибо, ребята!

Редактировать:

Я последовал совету относительно прослушивателя событий отправки. Однако перед отправкой формы необходимо выполнить запрос AJAX.

 form1.addEventListener('submit', function(e) {
    $.ajax({
    type: 'POST',
    url: 'form_submission.php',
    data: {'check_input': input.value}, 
    success: function(response){
    if (response == true){
    alert("Thank you for your inquiry!");
    }
    }
    else {
    alert("Your input entered was incorrect.")
    e.preventDefault();
    }
    }
    }
    );

Каким-то образом прослушиватель событий просто игнорирует мой запрос AJAX и все равно отправляет форму. Он даже не показывает оповещения, что очень странно.

Ответ №1:

Удаление action атрибута не предотвратит отправку формы, оно только перезагрузит страницу.

Вместо этого вам следует прикрепить прослушиватель submit событий в форме и добавить код, который вы хотите выполнить, перед отправкой в обратном вызове:

 form1.addEventListener('submit', function(){
  alert('submit!');
}) 
 <form id="form1" name="form1" class="formclass" accept-charset="UTF-8" autocomplete="off" enctype="multipart/form-data" method="post" novalidate action="https://www.external_url.com">
  <button>submit</button>
</form>

Для условной отправки формы Event.preventDefault() используется для предотвращения отправки формы:

 form1.addEventListener('submit', function(e) {
  if (!input.value.length > 0) {
    console.log('You have not filled out the input field')
    e.preventDefault();
  }
}) 
 <form id="form1" name="form1" class="formclass" accept-charset="UTF-8" autocomplete="off" enctype="multipart/form-data" method="post" novalidate action="https://www.external_url.com">
  <input id="input">
  <button>submit</button>
</form>

Если вы делаете запрос AJAX, ваш код должен выглядеть так:

 form1.addEventListener('submit', function(e) {
    e.preventDefault();
    $.ajax({
        type: 'POST',
        url: 'form_submission.php',
        data: {
            'check_input': input.value
        },
        success: function(response) {
            if (response == true) {
                alert("Thank you for your inquiry!");
                form1.submit();
            }
        }
        else {
            alert("Your input entered was incorrect.")
        }
    })
});

Комментарии:

1. Спасибо! И что, если я хотел бы реализовать «ЕСЛИ», которое проверяет что-то. Когда это правда, форма отправляется. Ложь отправка отменяется, даже если пользователь нажал на кнопку.

2. @Soda Я обновил ответ, чтобы показать вам, как вы могли бы добавить условие.

3. Эй, спасибо за быстрые ответы! Проблема, с которой я сейчас сталкиваюсь, заключается в том, что я выполняю ajax-запрос этой функции java. Этот запрос ajax проверяет наличие чего-либо в моем собственном PHP-файле. Если ответ окажется верным, то форма должна быть отправлена. Если ложно, то нет. Теперь проблема в том, что ajax занимает слишком много времени и игнорируется. Форма будет отправлена в любом случае. Я отредактирую свой оригинальный пост!

4. вы можете использовать $(«#form1»).отправить() после получения true

5. Я реализовал точно такой же код, поставив e.preventDefault() перед AJAX. Отправка по-прежнему срабатывает, независимо от результата запроса AJAX. Оповещения по — прежнему не отображаются. Что я упускаю?

Ответ №2:

Это небольшой фрагмент, иллюстрирующий использование записи выборки для проверки входного значения перед отправкой формы. Форма будет отправлена только в том случае, если числовое значение поля ввода >0 соответствует форме.

 form1.addEventListener('submit', function(e) {
  e.preventDefault();
  fetch("https://jsonplaceholder.typicode.com/users",{
   method: 'POST',
   headers: {'Content-Type':'application/json'},
   body: JSON.stringify({usrVal:input1.value})
  }).then(r=>r.json()).then(o=>{
    if ( o.usrVal>0) form1.submit()
  })
}) 
 <form id="form1" name="form1" class="formclass" accept-charset="UTF-8" autocomplete="off" enctype="multipart/form-data" method="post" novalidate action="https://www.external_url.com">
  <input id="input1">
  <button>submit</button>
</form>
Метки: ,