2016-05-26 11 views
0

Ich arbeite an einer Kundenumfrage, wo ich den Kunden frage, ob sie über ihre Erfahrungen kontaktiert werden möchten. Wenn sie ja wählen, folgen weitere Fragen und fragen sie nach ihrer bevorzugten Kontaktmethode & die Informationen für die ausgewählte Methode.Javascript wenn Optionsfeld ausgewählt, zusätzliche Eingabe erforderlich

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> 

Im Grunde, was ich würde gerne wissen, wie kann ich machen ‚FormOfContact‘ ein Pflichtfeld nur, wenn der Benutzer wird kontaktiert „Ja“ wählt?

Antwort

0

Wenn Sie ein Onchange-Ereignis für die Optionsfelder erstellen, können Sie prüfen, ob "Ja" oder "Nein" ausgewählt ist. Wenn "Ja" ausgewählt ist, fügen Sie dem zweiten Feld das Attribut "Erforderlich = Wahr" hinzu.

ELEMENT.setAttribute("required",true) 
0

Ein bisschen JavaScript könnte helfen. Siehe hier: 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> 
Verwandte Themen