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.

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 `
` for the brief moments before the new page has loaded? — drudge, Mar 18 '11 at 18:06
@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. — zerey, Mar 18 '11 at 18:13

score 8 · Accepted Answer · answered Mar 18 '11 at 18:17

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.

score 4 · Answer 2 · answered Mar 18 '11 at 18:04

4

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

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

answered Mar 18 '11 at 18:04

moe

28,814
4
19
16

score 1 · Answer 3 · edited Apr 09 '12 at 15:25

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!

score 1 · Answer 4 · answered Mar 18 '11 at 18:06

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

score 0 · Answer 5 · answered Mar 18 '11 at 18:05

0

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 = '';">

answered Mar 18 '11 at 18:05

Marco Demaio

33,578
33
128
159

In order to stop the form from being submitted you need to write in the `
` and you need to manually perform the submission via JS by using `form.submit();`
– Marco Demaio Mar 18 '11 at 18:09

add onclick function for submit button

5 Answers5

Linked

Related