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

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

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

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

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

источник

2011-12-21 OverStack

Вы слышали о [JQuery] (http://jquery.com/)? В любом случае для этого требуется javascript. Возможно, это возможно с помощью взломанного, хрупкого CSS, но лучше всего использовать js. –

Нет его нового. И могу ли я решить эту проблему только с помощью html/css без каких-либо других библиотек? Я hardt css3 и html5 очень «сильные» и получили решение для всего. – OverStack

Я не думаю, что вы могли бы сделать это только с CSS –

Для начала, скрыть одну из форм с style='display:none'

Затем написать скрипт переключает видимость формы на onChange случае радиокнопок. Я согласен, что jQuery сделает это очень просто: jQuery toggle div with radio buttons

Кроме того, с 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

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

источник

2011-12-21 15:59:41

Отредактировал код к вашему образцу, а также сделал его действительным xHTML, потому что вам не хватало закрывающих тегов и котировок. –

Я думаю, что получил. Это потрясающе, спасибо. – OverStack

Не могли бы вы принять его в качестве ответа? Благодарю. –

Использовать onclick с переключением javascript. Onclick переключит видимость. 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>

источник

2011-12-21 16:06:08 BrettAdamsGA

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

ответ

Смежные вопросы