2013-09-16 7 views
-1

это моя страница формы, я хочу, чтобы эта форма была скрыта под ссылкой или кнопкой, называемой сменой пароля, как только пользователь нажмет на нее, она должна отобразить эту форму. Любая помощь будет оценена по достоинству.Как я могу показать поля формы при нажатии на ссылку?

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

ответ

3

Вы хотите это: 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 файл в свой код в <head> вашей HTML страницы:

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

изначально я не хочу, чтобы отобразить поля формы, я просто хочу, чтобы показать ссылку или кнопку, как только пользователь нажимает на кнопку она должна отображать поля формы. –

+0

попробуйте мой новый ответ –

+0

это работает именно то, что я ищу в скрипке, но не в моей системе. мне нужно что-то иметь? –

0

Дайте ваши идентификаторы формы и кнопки. Тогда:

CSS

#yourForm { display: none; } 

JS

$(document).on('click', '#changePassword', function() { 
    $('#yourForm').show(); 
}); 
Смежные вопросы