asked on

jQuery - requiring textarea if specific radio button is checked

I need help! I would like to require the textarea if the disapprove button is checked. I would like the error message to appear below the textarea. I am not familiar with jQuery... Please answer in layman's terms. :)

This is the script I'm using to show/hide the textarea:

<script language="javascript">
/// show/hide 
function hide(id){
	document.getElementById(id).style.display='none';
}
function show(id){
	document.getElementById(id).style.display='';//'block'
}
</script>

Open in new window

And this is the radio button and textarea code:

<tr>
                <th width="25%" valign="top" style="font-weight:bold;">Please provide approval</td>
                <td>
                <cfinput type="radio" name="supervisorapproval" id="supervisorapproval" value="1" onclick="hide('supervisorapproval_div')" />Approve &nbsp;&nbsp;
                <cfinput type="radio" name="supervisorapproval" id="supervisorapproval" value="0" onclick="show('supervisorapproval_div')"/>Disapprove
                <div id ="supervisorapproval_div" style="display:none">
                	Explanation of disapproval<br>
                <cftextarea name="approvalExplanation" id="approvalExplanation" cols="45" rows="5"></cftextarea>
                </div>
                </td>
            </tr>

Open in new window

Julian Hansen

Here is a working example. You can leave the show and hide as you have it - I have put in a JQuery equivalent.
You can also add the error div after your textarea and just have the code populate it - this version will add the div.

<!doctype html>
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
  $('input:radio[name="supervisorapproval"]').click(function() {
    if ($(this).val() == 1) {
		$('#approvalExplanation').hide();
	}
	else {
		$('#approvalExplanation').show();
	}
  });
// OnSubmit
  $('form').submit(function() {

    // Remove the error box if it exsts

    $('#approval_error').remove();

    // If the disaprove button is checked then add the error box and
    // return false to avoid the submit
    if ($('input:radio[name="supervisorapproval"]').val() == 1) {
      $('#approvalExplanation').after('<div id="approval_error">Please enter an explanation</div>');
      return false;
    }
    // Otherwise all good - return true and submit
    return false;
  });
});
</script>
</head>
<body>
<form>
Approve <input type="radio" name="supervisorapproval" value="1" /><br/>
Disaprove <input type="radio" name="supervisorapproval" value="0" /><br/>
<textarea rows="5" cols="80" id="approvalExplanation" style="display: none"></textarea>
<input type="submit" />
</form>
</body>
</html>

Open in new window

traport

ASKER

Thanks for your help!

Do I need to add something else? This is making my show/hide not work. I'll keep playing around with the code you gave me.

SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER CERTIFIED SOLUTION

tony722

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

traport

ASKER

JulianH - this produces some weird behavior. When you select Disapprove - "Please provide explanation" comes up but doesn't go away when the explanation is provided and it won't submit. Additionally, if you toggle from Disapprove to Approve the "Please provide..." is still there.

Thank you so much for hanging in there with me to figure this out. I'm going to try Tony's solution now, too.

traport

ASKER

Thank you both! I went with Tony's because I was able to make it work. I wanted to give you both credit for helping me. I hope you agree with this. Many thanks.