Radio button text area

Question

I have this survey form which works perfectly fine. I just need this one question to be changed. Basically there's 2 radio buttons for Answers "Yes" and "No" and a text area under them. Now I want the text area to be locked unless the user selects the "Yes" radio button then they can type in the text area a reason for "Yes".

I did some looking around and attempting this function but it doesn't seem to be working.

 <script> function validate() { var radioYes = document.getElementById('radioYes'); var textarea = document.getElementById('question5comment'); if (radioYes.checked && question5comment.value.length < 1) { alert('Please enter your reason for Question 5.'); question5comment.focus(); return false; } } function toggle(value) { document.getElementById('question5comment').disabled = value; } </script> 5. Are you using other non-franchise service centres? <br> *if yes is there any other reason you would do so other than price <br> <input type="radio" name="question5" value="Yes" required>Yes <br> <input type="radio" name="question5" <value="No" required>No <br> <textarea name="question5comment" rows="5" cols="40" required></textarea>

Answer 1

Your syntax is wrong:

1. Unnecessary < before value .
2. No id s that are referring in your code.
3. Syntax errors.

Use the following:

 function validate() { var radioYes = document.getElementById('radioYes'); var textarea = document.getElementById('question5comment'); if (radioYes.checked && question5comment.value.length < 1) { alert('Please enter your reason for Question 5.'); question5comment.focus(); document.getElementById('question5comment').disabled = true; return false; } else { document.getElementById('question5comment').disabled = false; } }

 5. Are you using other non-franchise service centres? <br>*if yes is there any other reason you would do so other than price <br> <input type="radio" name="question5" value="Yes" required onclick="validate();" id="radioYes" />Yes <br> <input type="radio" name="question5" value="No" required onclick="validate();" id="radioNo" />No <br> <textarea name="question5comment" id="question5comment" rows="5" cols="40" required></textarea>

Answer 2

You have many missing code ! Like id not exist , function is created but no initialise called its.

<script>
function validate(t) {
var question5comment = document.getElementById('question5comment');    
if (t.checked && question5comment.value.length < 1) {
    alert('Please enter your reason for Question 5.');
    question5comment.focus();
    return false;
}
toggle(t.value);
}

function toggle(value) {
    document.getElementById('question5comment').disabled = (value == "Yes") ? false : true;
}
</script>


5. Are you using other non-franchise service centres? 
<br>
*if yes is there any other reason you would do so other than price
<br>
<input type="radio" name="question5"
value="Yes" onchange="validate(this)" required>Yes
<br>
<input type="radio" name="question5" onchange="validate(this)" value="No" required>No 
<br>
<textarea name="question5comment" id="question5comment" rows="5" cols="40" required></textarea>

Answer 3

I have a similar situation. My method is below.

<script>
$('input[name="question5"]').on('click', function() {
var radio_value = $(this).attr("value");
switch(radio_value){
   case "Yes":
       $('textarea[name="question5comment"]').attr('disabled', false).focus();
       break;
   default:
       $('textarea[name="question5comment"]').attr('disabled', true).focus();
                   }
});
</script>

5. Are you using other non-franchise service centres? 
<br>
*if yes is there any other reason you would do so other than price
<br>
<input type="radio" name="question5" value="Yes" required>Yes
<br>
<input type="radio" name="question5" value="No" required>No 
<br>
<textarea name="question5comment"  rows="5" cols="40" required></textarea>