Javascript если установлен переключатель, требуется дополнительный ввод

Я работаю над опросом клиентов, где я спрашиваю клиента, хотят ли они, чтобы с ними связались об их опыте. Если они выберут «да», за этим последуют дополнительные вопросы с указанием предпочтительного метода контакта и информации о выбранном методе.

HTML

<b>May we contact you about your experience?</b>
<br/>
<input type="radio" name="Contact" id="ContactYes" value="Yes" required />
<label for="ContactYes">Yes</label>
<input type="radio" name="Contact" id="ContactNo" value="No" />
<label for="ContactNo">No</label>

<br />
<br />

<b>Select your preferred method of contact:</b>
<br/>
<input type="radio" name="FormOfContact" id="Phone" value="Phone" />
<label for="Phone">Phone</label>
<input type="radio" name="FormOfContact" id="Email" value="Email" />
<label for="Email">Email</label>

В принципе, я хотел бы знать, как я могу сделать «FormOfContact» обязательным полем, только когда пользователь выбирает » Да » для контакта?

2 ответа

  1. При создании события onchange для переключателей можно проверить, выбрано ли «да» или «нет». Если выбрано «да», добавьте атрибут» required=true » во второе поле.

    ELEMENT.setAttribute("required",true)
    
  2. Немного javascript может помочь.
    Смотрите планкер здесь: http://embed.plnkr.co/k3yIf0gh03JBACSeV6yA/

    <!DOCTYPE html>
    <html>
    
    <script>
    function onChange(required) {
      document.getElementById('Phone').required = required;
      document.getElementById('div1').style.display = required ? 'block' : 'none';
    }  
    </script>
    
    <body>
        <b>May we contact you about your experience?</b>
        <br/>
            <input type="radio" name="Contact" id="ContactYes" value="Yes" required onChange='onChange(true)'/><label for="ContactYes">Yes</label>
            <input type="radio" name="Contact" id="ContactNo" value="No" onChange='onChange(false)' /><label for="ContactNo">No</label>
    
        <br />
        <br />
        <div id='div1' style='display:none'>
            <b>Select your preferred method of contact:</b><br/>
            <input type="radio" name="FormOfContact" id="Phone" value="Phone" /><label for="Phone">Phone</label>
            <input type="radio" name="FormOfContact" id="Email" value="Email" /><label for="Email">Email</label>
        </div>
    </body>
    </html>