Question

这是我的表单页面，我希望将此表单隐藏在名为change password的链接或按钮下，一旦用户单击它，就必须显示此表单。任何帮助将不胜感激。

           <form action="#buildurl('user.change_password')#" method="post">
                <input type="hidden" name="email" id="email" value="#session.auth.email#">

                <div class="control-group">
                    <label class="label-control" for="password">Enter current password</label>
                    <div class="controls">
                         <input type="password" name="password" id="password" >
                    </div>
                </div>

                <div class="control-group">
                    <label class="label-control" for="password_new">Enter New password</label>
                    <div class="controls">
                         <input type="password" name="password_new" id="password_new" >
                    </div>
                 </div>                 

                <div class="control-group">
                    <label class="label-control" for="password_confirm">Enter confirm password</label>
                    <div class="controls">
                         <input type="password" name="password_confirm" id="password_confirm" >
                    </div>
                 </div>

                <div>
                    <button type="submit" name="submit_password" id="submit_password" class="btn btn-primary">Submit</button>
                </div>
             </form>

Answer 1

你想要这个：DEMO HERE，如果它被隐藏，它将被显示，否则，它将被隐藏。我建议您在表单中添加id，并在'form'的jQuery代码中替换#id，以避免在有多个表单时出现问题。

<强> JQuery的：

<script type='text/javascript'>
 $('form').hide();//hide initially
 $("#showButton").click(function(e){
   $('form ').toggle('slow');//or just show instead of toggle

 });
</script>

将jQuery文件添加到html页面的<head>中的代码中：

<script type='text/javascript'src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>

Answer 2

提供表单和按钮ID。然后：

CSS

#yourForm { display: none; }

JS

$(document).on('click', '#changePassword', function () {
  $('#yourForm').show();
});

如何在点击链接时显示表单字段？

2 个答案: