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.

Desdamonna

You should be aware that once the Submit button has been clicked, the browser will start loading a new page.. Any changes you make to the current page will be lost. Can you explain to us WHY you want to show a hidden <div> for the brief moments before the new page has loaded? – Quantify

@jnpcl - onclick of submit button the browser will not load another page because i didn't add a action="" on the form declaration. i want to show a hidden div because the value to be submitted by the submit button will be thrown to the shown div. – Desdamonna

Why use submit then? why not just button? – Quantify

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.

Boxcar

Answer 2

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

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

Utu

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

Elbe

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!

Beldam

Answer 5

Supposing your hidden DIV (named "div2") is hidden because its style.display was set to 'none':

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

Annettannetta

In order to stop the form from being submitted you need to write in the <form action="..." method="POST" onsubmit="return false;"> and you need to manually perform the submission via JS by using form.submit(); – Annettannetta