javascript - how to show form on button click using jquery? - Stack Overflow

admin管理员组

文章数量:1405603

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>

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>

• javascript
• php
• jquery
• html
• forms

Share Improve this question Follow edited Mar 31, 2015 at 22:38 scrowler 24.4k1010 gold badges6464 silver badges9696 bronze badges asked Mar 31, 2015 at 22:34 daniel zeitounydaniel zeitouny 111 gold badge11 silver badge11 bronze badge 1

• 2 Proper code indentation highlights that you haven't closed your form tag (to start with). Secondly, you should bind the click event to the $('input[name="signup"]') button, or give the button a unique ID to bind to. I haven't seen anyone binding a click to a form element before... seems wrong. Thirdly, it looks like the button you click to show the form is within the div that you show when you click the button (chicken & egg?) The way I see it, you want something like this – scrowler Commented Mar 31, 2015 at 22:38

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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!

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/zdksn35f/

本文标签： javascripthow to show form on button click using jqueryStack Overflow