Jquery to crawl down the form hidden by default the first time,
<div><input type="button" id="changePwd" value="Change your password"/></div>
<br/>
<div id="form_pwd">
<form method="POST" action="google.com" 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 not to display the form until the user clicks the button, but I cannot get it to work, it is displayed by default when the page appears. thank
+3
Ohdude
source
to share
5 answers
add display: none to your div
<div id="form_pwd" style="display:none;">
+3
labroo
source
to share
Try it.
<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 show only after clicking change password button.
+2
Milap
source
to share
Just use CSS for this
<div id="form_pwd" style="display:none;">
This will hide your div element until a click event occurs where jquery will slide the element down and automatically remove the none display for you
+1
Ben swinburne
source
to share
Or you can do:
$("#form_pwd" ).hide();
0
user1040899
source
to share
what is :show
??? I assume you mean :visible
...
use this ...
$("#changePwd").click(function() {
if (!$("#form_pwd").is(":visible")) {
$("#form_pwd").slideDown("normal");
}
else {
$("#form_pwd").hide();
}
});
demo
0
Reigel
source
to share