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

traportAsked:
Who is Participating?
 
tony722Connect With a Mentor Commented:
jQuery is awesome, it's simple and easy to learn, and is certainly worth learning. I learned it from Lynda.com: http://www.lynda.com/jQuery-tutorials/essential-training/48370-2.html.

Here's an example showing how simple it is to do this using jQuery and the jQuery Validate plugin: See http://docs.jquery.com/Plugins/Validation.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<form id="approvalForm">
<table>
<tr>
                <th width="25%" valign="top" style="font-weight:bold;">Please provide approval</td>
                <td>
                <input type="radio" name="supervisorapproval" id="supervisorapproval" value="1" />Approve &nbsp;&nbsp;
                <input type="radio" name="supervisorapproval" id="supervisorapproval" value="0" />Disapprove
                <div id ="supervisorapproval_div" >
                	Explanation of disapproval<br>
                <textarea name="approvalExplanation" id="approvalExplanation" cols="45" rows="5"></textarea>				
                </div>
				<input type="submit" />
                </td>
</tr>
</table>
</form>
<script type="text/javascript">
	//See http://docs.jquery.com/Plugins/Validation
	$("input[name='supervisorapproval']").change(function () {
	  var approvalValue = $(this).val();
	  
	  if (approvalValue == '1') {
		$('#supervisorapproval_div').hide();
		$('#approvalExplanation').removeClass('required');			
	  } 
	  else if(approvalValue == '0') {
		$('#supervisorapproval_div').show();
		$('#approvalExplanation').addClass('required');
	  }
	});
	$('#supervisorapproval_div').hide();
	$("#approvalForm").validate();
</script>

Open in new window


Hope this helps!
0
 
Julian HansenCommented:
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

0
 
traportAuthor Commented:
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.
0
Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

 
Julian HansenConnect With a Mentor Commented:
Actually here is a correction - the selector on the submit is wrong
<!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();
	}
  });
  $('form').submit(function() {
    $('#approval_error').remove();
    if ($('input:radio[name="supervisorapproval"]:checked').val() == 0) {
      $('#approvalExplanation').after('<div id="approval_error">Please enter an explanation</div>');
      return false;
    }
    return true;
  });
});
</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

To add to your code all you need is this bit - assuming you keep your current show / hide
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
  $('form').submit(function() {
    $('#approval_error').remove();
    if ($('input:radio[name="supervisorapproval"]:checked').val() == 0) {
      $('#approvalExplanation').after('<div id="approval_error">Please enter an explanation</div>');
      return false;
    }
    return true;
  });
});
</script>

Open in new window

0
 
traportAuthor Commented:
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.
0
 
traportAuthor Commented:
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.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.