Question

将我的按钮type更改为submit后，它没有提交表单。在某种程度上，此后AJAX请求不起作用。如果我将其更改为type="button"，那么它就可以了，但是我想要这样做是因为必需验证在提供type="button"时不起作用。它仅在我提供按钮类型提交但表单未提交时才起作用。

<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 event

请注意，Submit事件在<form>元素本身上触发，而不在其中的任何<button>或<input type="submit">上触发。（表单是提交的，不是按钮。）

改为尝试click事件：

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

更新：我认为只需在 form 上提交 submit 事件就足够了，因为单击任何输入{{1} }：

type=submit

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

Answer 3

我认为您应该创建一个像<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();
      }
    }
  });
})
}

Answer 4

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

要记住的事情：

按钮类型提交最终将表单提交到当前页面（由于缺少动作属性）
当我们使用Ajax做某事时，我们最终会寻求“无页面加载”活动。在您的情况下，您既要使用“提交”按钮提交表单，又要发出Ajax请求，这将很难执行，并且如果有执行的机会，您将无法见证任何“成功”或“错误”活动，因为在此之前页面已重新加载。

更改按钮类型后，“提交”按钮未提交表单

4 个答案: