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添加了一个额外的＆＃34;按钮＆＃34;并关闭了＆＃34;表单＆＃34;标记

... 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，现在你可以做的一件事就是给每个输入元素你的表格是一个类（例如signup_txt）并使用css定位这些元素并将属性'display'设置为none以隐藏它们：

.signup_txt{
   display:none
}

然后给你的提交按钮一个id（例如signup_btn）并执行以下操作：

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

这应该在jsfiddle中做一个演示：http://jsfiddle.net/zdksn35f/

如何使用jquery在按钮单击上显示表单？

2 个答案: