<div><input type="button" id="changePwd" value="Change your password"/></div>
<br/>
<div id="form_pwd">          
    <form method="POST" action="google" id="pwdChange">
        <table>
            <tr>
                <td width="175px"><label for="oldPwd">Enter your password</label></td>                
                <td><input type="password" name="newPwd" id="newPwd" size="35"/></td>
            </tr>
            <tr>
                <td><label for="oldPwd_>"Re-enter your password</label></td>
                <td><input type="password" name="newPwd_" id="newPwd_" size="35"/></td>
            </tr>
    <tr>
        <td></td><td><input type="submit" value="Save Password" /></td>
    </tr>
        </table><br/>

    </form>
</div>

<script>
$("#changePwd" ).click(function () 
{
    if ($("#form_pwd").is(":show")) 
    {
    $("#form_pwd").slideDown("normal");
    }
    else
    {
    $("#form_pwd").hide();
    }
});

</script>

i would like to not display the form until the user click the button but I fail to make it work, it displays by default when the page shows up. thank you

<div><input type="button" id="changePwd" value="Change your password"/></div>
<br/>
<div id="form_pwd">          
    <form method="POST" action="google." id="pwdChange">
        <table>
            <tr>
                <td width="175px"><label for="oldPwd">Enter your password</label></td>                
                <td><input type="password" name="newPwd" id="newPwd" size="35"/></td>
            </tr>
            <tr>
                <td><label for="oldPwd_>"Re-enter your password</label></td>
                <td><input type="password" name="newPwd_" id="newPwd_" size="35"/></td>
            </tr>
    <tr>
        <td></td><td><input type="submit" value="Save Password" /></td>
    </tr>
        </table><br/>

    </form>
</div>

<script>
$("#changePwd" ).click(function () 
{
    if ($("#form_pwd").is(":show")) 
    {
    $("#form_pwd").slideDown("normal");
    }
    else
    {
    $("#form_pwd").hide();
    }
});

</script>

i would like to not display the form until the user click the button but I fail to make it work, it displays by default when the page shows up. thank you

• php
• javascript
• jquery
• html
• forms

5 Answers 5

add display:none to your div

<div id="form_pwd" style="display:none;">

Try this one.

<script type="text/javascript">
$("#form_pwd" ).hide();
$('#changePwd').click(function() {
  $('#form_pwd').slideToggle('slow', function() {
  });
});
</script>

$("#form_pwd" ).hide(); will hide your form on page load and only show once you click on change your password button.

Simply use CSS to do this

<div id="form_pwd" style="display:none;">

This will hide your div element until the click event occurs upon which jquery will slide the element down and automatically remove the display none for you

Or you can do :

$("#form_pwd" ).hide();

what is :show??? I'm guessing you mean :visible...

use this...

$("#changePwd").click(function() {
    if (!$("#form_pwd").is(":visible")) {
        $("#form_pwd").slideDown("normal");
    }
    else {
        $("#form_pwd").hide();
    }
});

demo