Javascript “提交”按钮在更改按钮类型后不提交表单

将我的按钮

类型

更改为

提交

后，它不会提交表单。不知何故，AJAX请求在那之后就不起作用了。如果我将其更改为

type=“button”

，那么它就工作了，但我希望这样做，因为必需的验证在给出

type=“button”

时不工作。它只在我给按钮类型submit时起作用，但是表单没有提交

提交

$（“#密码按钮”）。在（'submit'，函数（e）{
e、 预防默认值（）；
const email=$（“#密码重置”）.val（）；
$.ajax({
键入：“获取”，
url:“/forget_password=“+电子邮件，
成功：功能（响应）{
if（！response.data）{
$（“.sendError”）.show（）；
}否则{
$（“.sendSuccess”）.show（）；
}
}
});
})

我希望在检查

所需条件的同时提交我的表格。
引用MDN：

请注意，submit事件在元素本身上激发，而不是在元素内部或任何元素上激发。（提交的是表格，而不是按钮。）


将侦听器附加到按钮的
点击
偶数，或表单的
提交
事件。

请注意，submit事件在
元素本身上触发，而不是在其内部的任何
或
上触发。（提交的是表格，而不是按钮。）

请尝试以下事件：

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

更新：我认为只需在表单上提交事件就足够了，因为只要单击任何输入，事件就会触发
type=submit
：


$（'#myForm'）。在（'submit'，function（）上{
警报（“您的表单正在提交”）；
/*
你的代码在这里
*/
});

提交
我想你应该创建一个普通的，像
保存
然后编写这样的代码：

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

将Id或类属性添加到表单中

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

要记住的事情：


按钮类型提交将最终将表单提交到当前页面（由于缺少操作属性）
当我们使用Ajax做一些事情时，我们最终会寻求一种“页面加载较少”的活动。在您的情况下，您正在使用submit按钮提交表单并发出Ajax请求，这将很难执行，如果有机会执行表单，您将无法看到任何“成功”或“错误”活动，因为在此之前页面已经被重新加载
提交按钮没有
submit
方法-表单有-将事件更改为
$（“表单”）。打开（“提交”…
使用
提交
表单上的事件
。您可以使用前面提到的@freedomn-m，或者如果您在同一页面上有多个表单，则为
表单
提供ID，并使用
提交
表单上的事件
使用ID。如果使用，则不需要html验证
working@InsaneDA，我想你可以使用
在
表单
元素上提交
事件。请检查更新后的答案：）@insaeda-您的编辑未能解决两个答案和评论中提出的问题。不要使用这种方法。这比OP已经在做的事情倒退了一大步。@Rary McCrossan我不明白你想说什么不要在[event]
属性上使用
onclick
属性或任何其他内联
。这些都是过时的坏习惯。像OP已经在做的那样，使用不引人注目的事件处理程序。此外，在这种情况下，您应该使用
submit
事件，而不是
click
事件。
$("#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();
            }
        }
    });
})