为提交按钮添加onclick功能

Question

有没有办法将onclick函数添加到<input type="submit"> ？ 当在表单内单击提交按钮时，我想显示一个名为“div2”的隐藏<div> 。

Answer 1

请记住，您需要停止单击提交按钮的默认行为，否则将提交表单，并在显示div之前加载新页面。 例如：

    <script type="text/javascript">
        function showDiv() {
            document.getElementById('div2').style.display = 'block';
            return false;
        }
    </script>

    <div id="div2" style="display: none;">Visible</div>
    <form name="test_form" action="#">
         <input type="submit" onclick="return showDiv();" value="Submit" />
    </form>

使用此代码，表单现在将不会提交，并且将显示div 。 如果您稍后想要提交表单，则需要更改showDiv()以返回true ，使用另一个提交按钮或调用表单的submit()方法。

Answer 2

<script type="text/javascript">
    function clicked() {
        alert('clicked');
    }
</script>

<input type="submit" onclick="clicked();" value="Button" />

Answer 3

我一直在研究它。 我找到了一个非常简单的方法！ 这里是：

<?php
function test()
{
print "HI!" ;
}
?>

<form action="index.html" method="post">
<input type="submit" value="Reset" name="reset" >
<?php
if ($_POST["reset"]= Reset) test() ?>
</form>

在此代码中，index.html与代码中的文件相同。 （链接到同一文件或“重新加载”）重置是功能的重置按钮。 所以最后如果你不点击按钮，我会是这样的：

if ( = Reset) test() 

这不是真的所以它不会执行函数test（）

如果按下按钮，它会将您发送到同一站点，为$ _post提供一个功能

如果你按下按钮你会得到这个：

if ( Reset = Reset ) test()

这是真的。 并将打印HI！

Answer 4

document.getElementById('submit').onclick = function() {
   document.getElementById('div2').style.display = 'block';
   return false; // this stops further executing of the script so the form will not be submitted
}

如果您没有使用该按钮提交表单，我可以建议您使用：

<input type="button" id="showDiv" value="show div" />

Answer 5

假设隐藏的DIV（名为“div2”）被隐藏，因为它的style.display被设置为'none'：

<input type="submit" value="Submit" onclick="document.getElementById('div2').style.display = '';">