CODEWITHSUNDEEP
phpjquery
characters
characters

Reputation: 3

PHP & JQuery Question?

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?

Upvotes: 0

Views: 93

Answers (5)

Sarfraz
Sarfraz

Reputation: 382716

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;
  });
});

and finally here the demo for that

Upvotes: 3

g.d.d.c
g.d.d.c

Reputation: 47988

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>

Upvotes: 0

Wrikken
Wrikken

Reputation: 70490

Simple:
http://docs.jquery.com/Show

With effects:
http://jqueryui.com/demos/show/

Upvotes: 0

Matt Brunmeier
Matt Brunmeier

Reputation: 1310

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.

Upvotes: 0

MANCHUCK
MANCHUCK

Reputation: 2472

try adjusting the display property of the form using hide and show:

jQuery:

$('#formId').hide();

Upvotes: 0

Related Questions