• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1368
  • Last Modified:

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

0
traport
Asked:
traport
  • 3
  • 2
2 Solutions
 
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
 
Julian HansenCommented:
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
tony722Commented:
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
 
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

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now