Member Avatar for mr_scooby

I have this form that has a textarea that is compulsory, it has a checkbox that allows it to be ticked to show a hidden textarea using css/jquery.

What I would like is to know how to do the jquery to force input into the unhidden textarea only when the checkbox is ticked

heres the css onload to hide it

div.textarea {
    display: none;
}

heres my current jquery, top one displays the textarea if the checkobx is ticked, bottom one is the validation rules.

Needs to have some sort of if checkbox checked moreData required true, but i ahve no idea how to do this.

$(document).ready(function() {
    var visible = false;
    $('input[name="moreData"]').click(function() {
        var divs = $('div.textarea'); 
        if (visible) {
            divs.each(function() {
                this.style.display = 'none';
            });
            visible = false;
        }
        else {
            divs.each(function() {
                this.style.display = 'block';
            });
            visible = true;
        }
    });
 });   

$(document).ready(function() {
	// validate the comment form when it is submitted
	$("#test").validate({
	rules:
  {
			usernames:
      {
         required: true
      },
      moreData:
      {
         required: false 
      },
      
	},
	messages:
	{
    usernames: "<font color=\"red\" >User name required</font>"  
  }
  });
});

here is the html

<input type="checkbox" id="moreData" name="moreData" >More job description data required</b><br>

<div class="textarea">
        <textarea rows="40" Cols="90"></textarea>
</div>
</form>

Any help much appreciated.

  • 2 Contributors
  • 1 Reply
  • 899 Views
  • 19 Hours Discussion Span
  • Latest Post Latest Post by stbuchok
Member Avatar for stbuchok

If I understand properly you want the following:

If the checkbox is checked, show the text area and make it required. If the checkbox is not checked, hide the text area and don't make it required.

Please take a look at the following:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN"><link id="ctl00_styles" rel="Stylesheet" href="/ExpressOS/App_Themes/Professional_Grey/Professional_Grey.css"></link>

<html>
<head>
<title></title>

<link rel="stylesheet" type="text/css" href="test.css" />

<script src="jquery-1.6.4.min.js"></script>

<style>

div.textarea {
    display: none;
}

</style>

<script>

$(function(){

	$('#moreData').change(function(){
		if($(this).prop('checked')){
			$('.textarea').css({'display': 'block'});
		}
		else{
			$('.textarea').css({'display': 'none'});
		}
	});

	$("#mainForm").submit(function(){
		var isValid;

		if($('#moreData').prop('checked')){
			if($('#myText').val().length > 0){
				isValid = true;
			}
			else{
				isValid = false;

				alert('not valid');
			}
		}
		else{
			isValid = true;
		}

		return isValid;
	});

});

</script>

</head>
<body>

<form id="mainForm">

<input type="checkbox" id="moreData" name="moreData" >More job description data required</b><br>

<div class="textarea">
        <textarea id="myText" rows="40" Cols="90"></textarea>
</div>

<input type="submit" value="Submit" />

</form>

</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.