将 onclick 函数添加到提交按钮答案

【问题标题】：add onclick function to a submit button将 onclick 函数添加到提交按钮
【发布时间】：2012-10-08 07:14:46
【问题描述】：

我只是在学习 javascript 和 php。我创建了一个联系表单，我希望提交按钮在按下它时完成两件事：

提交数据给我（这部分工作）
阅读我的 onclick 功能（这部分不起作用）

<input id="submit" name="submit" type="submit" value="Submit" onclick="eatFood()">

<?php
if ($_POST['submit']) {
 ////????? 
}
?>

我正在将数据发送到我的电子邮件，所以我明白了。但是onclick 函数似乎不起作用。我尝试查看add onclick function for submit button，但没有帮助。

【问题讨论】：

向我们展示您的代码，以评估问题所在
您在该代码中没有 eatFood 函数。
document.forms['formID'].reportValidity() 如果所有表单元素的有效性都为真，则返回真。

标签： onclick submit

【解决方案1】：

如果你需要在提交数据之前做一些事情，你可以使用表单的onsubmit。

<form method=post onsubmit="return doSomething()">
  <input type=text name=text1>
  <input type=submit>
</form>

【讨论】：

【解决方案2】：

我需要查看您的提交按钮 html 标记以获得更好的帮助。我不熟悉 php 以及它如何处理回发，但我想这取决于你想要做什么，你有三个选择：

在客户端获取处理onclick按钮：在这种情况下，您只需要调用一个javascript函数。

function foo() {
   alert("Submit button clicked!");
   return true;
}

&lt;input type="submit" value="submit" onclick="return foo();" /&gt;

如果要在服务器端处理点击，首先要确保表单标签方法属性设置为post：
```
<form method="post">
```
您可以使用来自form 本身的onsubmit 事件将您的函数绑定到它。

<form name="frm1" method="post" onsubmit="return greeting()">
    <input type="text" name="fname">
    <input type="submit" value="Submit">
</form>

【讨论】：

onsubmit 表单是更好的处理程序。如果您没有表格，请更改为type="button"
@mplungjan tanx 提示，我将其添加到答案中
由于参考资料选择不当，尚未 +1 ;)
@mplungjan 我没有意识到链接不在锚点中。感谢您提及。

【解决方案3】：

html:

<form method="post" name="form1" id="form1">    
    <input id="submit" name="submit" type="submit" value="Submit" onclick="eatFood();" />
</form>

Javascript：使用 javascript 提交表单

function eatFood() {
document.getElementById('form1').submit();
}

显示点击消息

function eatFood() {
alert('Form has been submitted');
}

【讨论】：

【解决方案4】：

我有这个代码：

<html>
<head>
<SCRIPT type=text/javascript>
function deshabilitarBoton() {     
    document.getElementById("boton").style.display = 'none';
    document.getElementById("envio").innerHTML ="<br><img src='img/loading.gif' width='16' height='16' border='0'>Generando...";     
    return true;
} 
</SCRIPT>
<title>untitled</title>
</head>
<body>
<form name="form" action="ok.do" method="post" >
<table>
<tr>
<td>Fecha inicio:</td>
<td><input type="TEXT" name="fecha_inicio" id="fecha_inicio"  /></td>
</tr>
</table>
<div id="boton">
   <input type="submit" name="event" value="Enviar" class="button" onclick="return deshabilitarBoton()" />
</div>
<div id="envio">
</div>
</form>
</body>
</html>

【讨论】：

【解决方案5】：

<button type="submit" name="uname" value="uname" onclick="browserlink(ex.google.com,home.html etc)or myfunction();"> submit</button>

如果你想在没有任何脚本语言的情况下点击 HTML 中的按钮打开页面，那么你可以使用上面的代码。

【讨论】：

onclick如何返回myfunction()，但强制浏览器停留在同一页面上。该功能只会说“谢谢您的反馈”。我的表单已连接到本地 php 文件（formsubmit.php）：<form action="formsubmit.php" id="contact-form" target="_blank" method="post" enctype="application/x-www-form-urlencoded">

【解决方案6】：

使用id="hiddenBtn" 和type="submit" 创建一个隐藏按钮，用于提交
将当前按钮更改为type="button"
设置onclick的当前按钮调用function如下所示：

function foo() {
    // do something before submit
    ...
    // trigger click event of the hidden button
    $('#hinddenBtn').trigger("click");
}

【讨论】：