表单未通过onclick事件提交

Question

我正在尝试在图像单击事件上提交表单，但是却遇到了Uncaught TypeError: Object #<HTMLInputElement> has no method 'submit'单击事件触发后， Uncaught TypeError: Object #<HTMLInputElement> has no method 'submit'此错误。

我的代码：

<form name="searchRef" id="searchRef" method="get" action="#">
  <input type="text" name="s" id="ref" value="" class="ref_search" />
  <input type="submit" name="submit" id="ref_submit" value="GO" class="ref_submit" />
  </span> <span> <img src="http://www.webdeveloper.com/forum/image.php?s=2c556ca62e6fd2a2e4d6ca925fb3fda1&u=8331&dateline=1057444055" alt="Go" onClick="document.getElementById('searchRef').submit();"> </span>
</form>

有什么想法或建议吗？ 谢谢。

Answer 1

您必须删除/更改“提交”按钮的属性名称，例如：

name="btnSubmit"

否则，将覆盖FORM元素的commit（）方法。

Answer 2

将您的提交按钮名称从submit更改为ref_submit

如下所示

<input type="submit" name="ref_submit" id="ref_submit" value="GO" class="ref_submit" />

Answer 3

这只是一个想法，但是尝试使用

document.forms["searchRef"].submit();

代替

document.getElementById('searchRef').submit();

Answer 4

您的页面中可能已经有一个id=searchRef的html元素，因此getElementById()获得错误的元素。

更好的解决方案是将输入按钮替换为输入type = image：

<input type="image" name="ref_submit" id="ref_submit" value="GO" class="ref_submit" 
  src="path/to/your/image"  />

请注意，这将导致服务器端发出带有$_POST['submit_x']和$_POST['submit_y'] （对应于图像左上角的（x，y）鼠标坐标）的POST请求。

Answer 5

请更改表单标签的action属性，使用目标page name say action.php替换# ，并在表单标签中添加onsubmit="javascript:return false"

Answer 6

发生此错误是因为您的name属性为submit ，请尝试更改名称属性或尝试以下代码。

  <img src="http://www.webdeveloper.com/forum/image.php?s=2c556ca62e6fd2a2e4d6ca925fb3fda1&u=8331&dateline=1057444055" alt="Go" onclick='window.searchRef.submit();' />