Is there a way to hide a form from my users until they click a link and then the form drops down for the user to fill out, by using PHP or JQuery if so how? Is there a tutorial that will teach me how to do this?
5 Answers
Yes, you can do so, you hide the form initially either with jquery or css and the slideDown it down like this:
$(function(){
$('a#link_id').click(function(){
$('form-selector').slideDown('slow');
// prevent default action
return false;
});
});
and to hide it back, you can use the slideUp function:
$(function(){
$('a#link_id_2').click(function(){
$('form-selector').slideUp('slow');
// prevent default action
return false;
});
});
If you want to show and hide using same link, use the slideToggle instead:
$(function(){
$('a#link_id').click(function(){
$('form-selector').slideToggle('slow');
// prevent default action
return false;
});
});
Here is the prototype for your html:
<a id="form_show_hide">Show/Hide Form</a>
<div id="form_container">
<form>
...form elements...
</form>
</div>
and jquery for that:
$(function(){
$('a#form_show_hide').click(function(){
$('#form_container').slideToggle('slow');
// prevent default action
return false;
});
});
Comments
try adjusting the display property of the form using hide and show:
jQuery:
$('#formId').hide();
Comments
Yes, there are a number of ways to implement something like this. An Ultra Basic implementation:
<form action="" method="post" id="login_form" style="display: none;">
<label for="username">Username</label> <input type="text" name="username" /><br />
<label for="password">Password</label> <input type="password" name="password" />
</form>
<a href="javascript: void(0)" onclick="$('#login_form').slideToggle();">Show Form</a>
You could use any number of jquery plugins and methods for showing the form, including show()/hide(), fadeIn()/fadeOut(), slideUp(), slideDown() (as above) etc. You could use something like FancyBox (or Facybox) to display the form in a 'popup' type window.
Note - For compatibility, I'd suggest not using jquery in the onclick event.
Comments
Comments
You can do this with jQuery. You need a click target, then an event bound to the click target and a container for the form. Something like:
<span id="ClickTarget">Click Me!</span>
<div id="FormContainer"> <!-- fill in the form here --> </div>
<script type=text/javascript language=javascript>
$('#ClickTarget').click(function () {
$('#FormContainer').show();
});
</script>
