За последние 24 часа нас посетили 20115 программистов и 1664 робота. Сейчас ищут 1592 программиста ...

Появляющиеся поля в зависимости от radio button

Тема в разделе "JavaScript и AJAX", создана пользователем castnet, 1 мар 2010.

  1. castnet

    castnet Активный пользователь

    С нами с:
    28 фев 2010
    Сообщения:
    8
    Симпатии:
    0
    Привет всем. Очередной мой вопрос.
    Значит есть часть формы заказа где пользователь выбирает вариант оплаты. Возможно ли сделать так, чтобы допустим при выборе webmoney, появлялось поле для ввода WM идентификатоа, т.е. type="text". Если он выберет другой способ, появится такое же поле для ввода номера кошелька. У меня форма заказа оформлена html таблицей в 2 столбика. В одном описание поля, в другом - область для ввода. Я попытался организовать то, что я описал ,но название поля и область, где вписывается номер кошелька, почему-то отображаются только в одном столбике, т.е. и название и поле в одном столбике в оджной строке.
    Выкладываю javascript, который я нашёл и переделал и часть формы

    [js]<script language="javascript">
    function Display(which) {
    wm=document.getElementById("wmid");
    ym=document.getElementById("yam");
    if (which=="wmid") wm.style.display="block";
    else wm.style.display="none";
    if (which=="yam") ym.style.display="block";
    else ym.style.display="none";
    }
    </script>[/js]

    HTML:
    1. <tr>
    2. <td><strong>Оплата:*</strong></td>
    3. <td><input type="radio" name="payment" value="WMID" checked onClick="Display('wmid');"> Webmoney<br>
    4. <input type="radio" name="payment" value="Яндекс.Деньги" onClick="Display('yam');"> Яндекс.Деньги</td>
    5. </tr>
    6. <tr id="wmid" style="display:block">
    7. <td><strong>WMID:</strong></td>
    8. <td><input type="text" name="wmid" size="20"></td>
    9. </tr>
    10. <tr id="yam" style="display:none">
    11. <td><strong>ЯН.ДН:</strong></td></td>
    12. <td><input type="text" name="yam" size="20"></td>
    13. </div>
    14. </tr>
    Если кто сможет, скажите в чём ошибка.
    С уважением
     
  2. Padaboo

    Padaboo Старожил
    Команда форума Модератор

    С нами с:
    26 окт 2009
    Сообщения:
    5.242
    Симпатии:
    1
    [js]<script language="javascript">
    function Display(obj) {
    oplataid=obj.id;
    if(oplataid=='wm'){
    document.getElementById("wmdiv").style.display='block';
    document.getElementById("wmid").style.display='block';
    document.getElementById("yadiv").style.display='none';
    document.getElementById("yand").style.display='none';
    }
    if(oplataid=='ya'){
    document.getElementById("yadiv").style.display='block';
    document.getElementById("yand").style.display='block';
    document.getElementById("wmdiv").style.display='none';
    document.getElementById("wmid").style.display='none';
    }
    }
    </script>[/js]

    HTML:
    1.     <tr>
    2.         <td>
    3.             Оплата
    4.         </td>
    5.         <td>
    6.             <input type="radio" name="payment" value="WMID"  onClick="Display(this);" id="wm"> Webmoney<br/>
    7.             <input type="radio" name="payment" value="Яндекс.Деньги" onClick="Display(this);" id="ya"> Яндекс.Деньги
    8.         </td>
    9.     </tr>
    10.     <tr>
    11.         <td>
    12.             <span id="wmid" style="display:none">WMID:</span><span id="yand" style="display:none">ЯН.ДН</span>
    13.         </td>
    14.         <td>
    15.             <div style="display:none" id="wmdiv">
    16.                 <input type="text" name="wmid" size="20">
    17.             </div>
    18.             <div style="display:none" id="yadiv">
    19.                 <input type="text" name="yadiv" size="20">
    20.             </div>
    21.         </td>
    22.     </tr>
    23.  
    24.  
    25. </form>
    код не лучший в мире но работает
    можешь 1 поле оставить или я хз делай как удобно
     
  3. castnet

    castnet Активный пользователь

    С нами с:
    28 фев 2010
    Сообщения:
    8
    Симпатии:
    0
    Спасибо огромное, всё работает :D Пришлось только немного подредактирвоать