<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

Share Follow asked Mar 7, 2012 at 7:20 OhDudeOhDude 22522 gold badges44 silver badges77 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 7

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