表单onsubmit不适用于表单.submit（）

Question

我有一个表单，我在onsubmit上应用了一个函数：

var theForm = document.getElementById("myform");
theForm.onsubmit = function FormSubmit() {
alert("something");
};

我已在表单中添加了提交按钮<input type="submit" value="submit"/>

警告something文字。太好了！

我有一张图片，我想让它提交表格：

<img onclick="document.getElementById('myform').submit();" src="mylocation"/>

但它没有发挥功能......它不会在屏幕上提醒something。

编辑：我不想要jQuery的东西。纯JS

Answer 1

事件处理程序仅在响应用户操作或异步事件时运行，而不是像调用form.submit()这样的正常程序操作。这样做的一个原因是，表单的提交处理程序执行某些工作然后调用form.submit()并不罕见，如果它再次触发处理程序，这将导致无限递归。

将要运行的代码放在命名函数中：

function mySubmit() {
    alert("something");
}

theForm.onsubmit = function() {
    mySubmit();
};

然后你可以在点击处理程序中调用该函数：

<img onclick="mySubmit(); document.getElementById('myform').submit();" src="mylocation"/>

Answer 2

问题是事件处理程序在脚本调用事件时没有响应。

跟贝拉说话一样

  var theForm = document.getElementById("myform");
  function FormSubmit() {
    alert("something");
  };
  theForm.onsubmit = FormSubmit;

手动调用图像函数onclick，如下图

<img onclick="FormSubmit();document.getElementById('myform').submit();" src="mylocation"/>

Answer 3

您可以在图片周围使用a标记，如下所示：

<a href="javascript://" onClick="document.getElementById('myform').submit();">
  <img src="mylocation" />
</a>