将onclick函数添加到提交按钮


add onclick function to a submit button

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

  • 向我提交数据(此部分正在工作)
  • 阅读我的onclick函数(此部分不起作用)
    • 1
    2
    3
    4
    5
    6
    7
    <input id="submit" name="submit" type="submit" value="Submit" onclick="eatFood()">

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

    我正在将数据发送到我的电子邮件，所以我明白了。 但是onclick函数似乎不起作用。 我尝试查看提交按钮的添加onclick功能，但没有帮助。

    相关讨论

    我需要查看您的"提交"按钮html标签以获得更好的帮助。我不熟悉php及其如何处理回发，但是我猜根据您要执行的操作，您有三个选择：

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

    • 1
    2
    3
    4
    function foo() {
       alert("Submit button clicked!");
       return true;
    }
    1
    <input type="submit" value="submit" onclick="return foo();" />

  • 如果要处理服务器端的单击，则首先应确保将表单标记方法属性设置为post：

    1
    <form method="post">

  • 您可以使用form本身中的onsubmit事件将函数绑定到该事件。

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

    相关讨论

    的HTML：

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

    Javascript：
    使用javascript提交表单

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

    显示onclick消息

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

    如果您需要在提交数据之前做点事，可以使用表单的onsubmit。

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

    我有以下代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    <html>
    <head>
    <SCRIPT type=text/javascript>
    function deshabilitarBoton() {    
        document.getElementById("boton").style.display = 'none';
        document.getElementById("envio").innerHTML ="<img src='img/loading.gif' width='16' height='16' border='0'>Generando...";    
        return true;
    }

    untitled
    </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>

       <input type="submit" name="event" value="Enviar" class="button" onclick="return deshabilitarBoton()" />



    </form>
    </body>
    </html>

  • 用id="hiddenBtn"和type="submit"创建一个隐藏的按钮来提交
  • 将当前按钮更改为type="button"

  • 设置当前按钮的onclick调用function如下所示：

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

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

    如果您想单击HTML中的按钮而无需任何脚本语言即可打开页面，则可以使用上面的代码。

    相关讨论