如何使用jquery在按鈕單擊上顯示表單？

Question

我希望我的表單在我單擊按鈕時顯示

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

這是jQuery代碼：

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

Answer 1

您可能想要嘗試這樣的事情……（注意，我在HTML中添加了一個額外的“按鈕”，並關閉了“ form”標簽

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>

然后使用JQuery ...

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

JSFiddle

希望這可以幫助。 祝好運！

Answer 2

首先，您還沒有關閉表單標簽，其次，您以id為“ form”的元素作為目標，並且您擁有的任何元素都具有該id，現在您可以做的就是為表單中的每個輸入元素分配一個class（例如signup_txt），並使用css定位這些元素，並將屬性“ display”設置為none，以將其隱藏，如下所示：

.signup_txt{
   display:none
}

然后為您的提交按鈕提供一個ID（例如，signup_btn）並執行以下操作：

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

這應該可以完成工作，這是jsfiddle中的一個演示： http : //jsfiddle.net/zdksn35f/