Кнопка «Отправить» не отправляет форму после изменения типа кнопки

Question

После изменения моей кнопки type на submit форма не отправляется. Почему-то запрос AJAX после этого не работает. Если я изменю его на type="button", тогда он будет работать, но я хочу это, потому что обязательный проверка не работает при выдаче type="button". Это работает, только когда я даю кнопку типа submit , но тогда форма не отправляется.

<form>
  <input type="email" class="form-control" id="passwordReset" placeholder="Email" required/>
  <button type="submit" id="passwordButton"> Submit</button>
</form>

$("#passwordButton").on('submit', function(e) { 
  e.preventDefault();
  const email = $("#passwordReset").val();

  $.ajax({
    type: "GET",
    url: "/forget_password=" + email,
    success: function(response) {
      if (!response.data) {
        $(".sendError").show();
      } else {
        $(".sendSuccess").show();
      }
    }
  });
})

Я хочу, чтобы моя форма была отправлена ​​при проверке required условие также.

Answer 1

Цитирование из MDN:

Обратите внимание, что событие submit происходит на самом элементе, а не на каком-либо или внутри него. (Формы отправляются, а не кнопки.)

https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event

Присоедините слушателя к click даже кнопки или к submit событие формы.

Answer 2

HTMLFormElement: событие submit

Обратите внимание, что событие submit запускается на самом элементе <form>, а не на любом <button> или <input type="submit"> внутри него. (Формы отправляются, а не кнопки.)

Попробуйте вместо click событие:

$("#passwordButton").on('click', function(e) { 

Обновление : Я думаю, достаточно просто представить в форме , так как событие будет срабатывать при нажатии на любой вход type=submit:

$('#myForm').on('submit', function(){
  alert('Your form is submitting');
  /*
    Your code here
  */
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
  <input type="email" class="form-control" id="passwordReset" placeholder="Email" required/>
  <button type="submit" id="passwordButton"> Submit</button>
</form>

Answer 3

Добавьте Id или атрибут класса к вашей форме.

<form id="formYouWantToSubmit">
    <input type="email" class="form-control" id="passwordReset" placeholder="Email" required/>
    <button type="submit" id="passwordButton"> Submit</button>
</form>

Затем,

$("#formYouWantToSubmit").on('submit', function(e) { 
    const email = $("#passwordReset").val();

    // This will validate if email having any value (from string point of view)
    if (!email) {
        e.preventDefault();// To restrict form submission
        //### Do anything here when validation fails
        return false;
    }

    $.ajax({
            type: "GET",
            url: "/forget_password=" + email,
            success: function(response) {

            if (!response.data) {
                $(".sendError").show();
            } else {
                $(".sendSuccess").show();
            }
        }
    });
})

Запомните:

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

Answer 4

Я думаю, что вы должны просто создать нормальный как <button onclick="Submit()">save</button> и написать код, подобный этому:

Submit(e){
  e.preventDefault();
  const email = $("#passwordReset").val();

  $.ajax({
    type: "GET",
    url: "/forget_password=" + email,
    success: function(response) {
      if (!response.data) {
        $(".sendError").show();
      } else {
        $(".sendSuccess").show();
      }
    }
  });
})
}