how to show form on button click using jquery?

Question

I want my form to appear when i click on the button sign up

<div id="signup">
    <form action="<?php echo $_SERVER['PHP_SELF']; ?>"  method="POST"  id="form1">
        <input name="user" type="text" placeholder="Username" size="30" >
        <input name="pass" type="password" placeholder="Password"  size="30" >
        <input class="btn" type="submit" value="sign up" name="signup">
</div>

this is the jQuery code:

<script>
$( "#form" ).click(function() {
  $( "#signup" ).show( "Clip", 1000 );
});
</script>

Answer 1

You might want to try something like this...(notice I have added an extra "button" to your HTML and closed the "form" tag

CSS...

#form1 {
 display : none;
}
button {
 margin-bottom: 10px;
}

HTML...

<div id="signup">
<button id="signup">Click here to sign-up!</button>
    <form action="<?php echo $_SERVER['PHP_SELF']; ?>"  method="POST"  id="form1">
        <input name="user" type="text" placeholder="Username" size="30" >
        <input name="pass" type="password" placeholder="Password"  size="30" >
        <input class="btn" type="submit" value="sign up" name="signup">
    </form>
</div>

then using JQuery...

$( document ).ready( function() {
  $( "#signup" ).click( function() {
    $( "#form1" ).toggle( 'slow' );
  });
});

JSFiddle

Hope this helps. Good luck!

Answer 2

first of all you haven't closed your form tag, second your targeting an element with a id 'form' and any of the elements you have has such id, now one thing you could do is to give each input element in your form a class(signup_txt for example) and target those elements using css and set the property 'display' to none to hide them like this:

.signup_txt{
   display:none
}

then give your submit button an id (signup_btn for example) and do this:

$("#signup_btn").click(function(){
  $(".signup_txt").show(); 
});

and that should do the job here's an demo in jsfiddle: http://jsfiddle.net/zdksn35f/