Выберите между двумя разными формами - PullRequest
Новая
       5

Выберите между двумя разными формами

1 голос
/ 21 декабря 2011

Я хотел бы построить что-то вроде этого: при запуске пустой страницы только с двумя радиокнопками.Допустим, 

<input type="radio" name=myradio value="1">one
<input type="radio" name=myradio value="2">two

Есть также две формы 

<form name="form1" action="..." method="post">     
    <input.../>
    <input type ="submit"/>
</form>

<form name="form2" action="..." method="post">     
    <input.../>
    <input type ="submit"/>
</form>

Но в начале я не хочу их показывать!Только если пользователь выбирает одну из радиокнопок.Если пользователь идет «один», то появляется form1, если пользователь на «два», появляется form2.Есть идеи?

Ах, есть еще кое-что.Если пользователь переключается между двумя формами, могу ли я добавить некоторые «крутые» эффекты?Вы знаете, не только сделать на невидимом и показать другого.Что-то с большим количеством эффектов.Может быть, при изменении сделать одного медленно невидимым, а затем медленно показать другого?Некоторые варианты CSS3 для этого?Спасибо

Ответы [ 2 ]

3 голосов
/ 21 декабря 2011

Для начала скройте одну из форм с помощью style='display:none'

Затем напишите сценарий, который переключает видимость форм на событие onChange переключателей.Я согласен, что jQuery сделает это очень просто: jQuery переключает div с переключателями

Кроме того, с jQuery легко создавать эти «крутые» эффекты.

Без jQuery, проверьте этот пример, не самым красивым способом, но функциональным: 

<script type="text/javascript"> 
function toggle(theform) { 
    document.getElementById("form1").style.display = "none"; 
    document.getElementById("form2").style.display = "none"; 
    document.getElementById(theform).style.display = "block"; 
} 
</script> 

<body>

<form name="form1" id='form1' action="..." method="post" >     
    <input />
    <input type ="submit"/>
</form>

<form name="form2" action="..." method="post" style="display: none;">     
    <input />
    <input type ="submit"/>
</form>


<input type="radio" name="myradio" value="1" onclick="toggle('form1');"/>one
<input type="radio" name="myradio" value="2" onclick="toggle('form2');" />two

Вы понимаете, как это работает, или вам нужно какое-то объяснение?

1 голос
/ 21 декабря 2011

Используйте onclick с переключателем JavaScript.Нажатие переключит видимость.Javascript фактически выполняет переключение, а style="display: none;" фактически скрывает его до тех пор, пока переключение не будет выполнено.

, например, html 

<input type="radio" name=myradio value="1" onclick="toggle_visibility('form1');">one
<input type="radio" name=myradio value="2" onclick="toggle_visibility('form2');">two

<form id="form1" action="..." method="post"  style="display: none;">     
    <input.../>
    <input type ="submit"/>
</form>

<form id="form2" action="..." method="post"  style="display: none;">     
    <input.../>
    <input type ="submit"/>
</form>

и javascript в заголовке 

 <script type="text/javascript">
        function toggle_visibility(id) {
           var e = document.getElementById(id);
           if(e.style.display == 'block')
              e.style.display = 'none';
           else
              e.style.display = 'block';
        }
</script>
...