add onclick function for submit button

Question

Is there a way to add an onclick function to an <input type="submit">? I would like to show a hidden <div> named "div2" when the submit button is clicked inside a form.

Answer 1

Remember that you need to stop the default behavior of clicking the submit button or else the form will be submitted and a new page will load before the div ever get's displayed. For example:

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

Using this code the form will now not submit and the div will be shown. If you then want to submit the form later you need to either change showDiv() to return true, use another submit button or call the submit() method of the form.

Answer 2

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

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

Answer 3

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
}

if you're not using the button for submitting the form I can suggest you to use:

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

Answer 4

I've been working on it a little while. I found a very easy way! Here it is:

<?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>

in this code index.html is the same file as in the code. (link to the same file or "reload") Reset is the reset button for a function. so in the end if you dont click the button, i'll be this:

if ( = Reset) test() 

this is not true so it wont execute the function test()

if you press the button it will send you to the same site giving the $_post a function

if you press the button you will get this:

if ( Reset = Reset ) test()

this is true. and will print HI!