CODEWITHSUNDEEP
jqueryformsradio-buttonselection
Homer_J
Homer_J

Reputation: 3323

jQuery - display div based on radio button selection

Possible solution but cannot get it to work:

$(function(){
  $('input[name="q10"]').click(function(){
    if ($(this).is(':checked'))
    {
    var flag=0;

    $("input[type='radio']:checked").each(function() {
      if($(this).val()==1 || $(this).val()==2 ){
        $("#disagree").show();
         flag++;
      }
      else if(($(this).val()==3 || $(this).val()==4) && flag==0)
        $("#agree").show();
    });
    }
  });
});

I have a page with 10 questions on - with a response scale for each question, as follows:

<div id="rq1" class="row" onmouseover="changeBackgroundColor(this.id)" onmouseout="changeBackgroundColor2(this.id)">
<div class="col1">1.</div>
<div class="col2a">Question text</div>
<div class='colans'>
      <input  name='q1' value='4' id='q1a4' type='radio' onclick='mand();' />
</div>
<div class='colans'>
      <input  name='q1' value='3' id='q1a3' type='radio' onclick='mand();' />
</div>
<div class='colans'>
      <input  name='q1' value='2' id='q1a2' type='radio' onclick='mand();' />
</div>
<div class='colans'>
      <input  name='q1' value='1' id='q1a1' type='radio' onclick='mand();' />
</div>
<div class='colans'>
      <input  name='q1' value='-1' id='q1a-1' type='radio' onclick='mand();' />
</div>
</div>

The above replicates for each of the 10 questions q1 through q10.

At the end of the 10 questions, I have two textareas where users can write comments, However, the first textarea needs to appear if a user selects ANY response with a value of either 2 or 1. The second textarea needs to appear if a user selects ANY response with a value of either 4 or 3 but hasn't selected a response with a value of 2 or 1.

Finally, I need the jQuery to run once the user has answered the last question, question 10 - it's at this point I need the code to fire.

In the past, I have manually created Javascript code for each response and checked but I wondered if there was a neater, more concise way using jQuery?

Upvotes: 0

Views: 580

Answers (2)

user2587132
user2587132

Reputation: 

var flag=0;

$("input[type='radio']:checked").each(function() {
  if($(this).val()==1 || $(this).val()==2 ){
    $("#myTextArea1").show();
     flag++;
  }
  else if(($(this).val()==3 || $(this).val()==4) && flag==0)
    $("#myTextArea2").show();
});

fire this code when the last question is answered!!

update: this is the full code...

 $(document).ready(function() {

   $("#disagree").hide();
   $("#agree").hide();

   $("input[name='q10']").click(function() {

    $("#disagree").hide();
    $("#agree").hide();

    var flag=0;

    $("input[type='radio']:checked").each(function() {

       if($(this).val()==1 || $(this).val()==2 ){

           $("#disagree").show();
           $("#agree").hide();
           flag++;
       }

      else if(($(this).val()==3 || $(this).val()==4) && flag==0)

           $("#agree").show();
   });
 });    
});

Upvotes: 0

webcoder
webcoder

Reputation: 311

Well I have not formatted code well but I guess this will help you.Also I checked the last answer given and I guess everytime accessing this object is not that good idea.But its just my opinion. All the best :-)

`var myradio = $('input[name=nettype]');
var nettype = myradio.filter(':checked').val();

if(nettype ==1 || nettype ==2 )
{
 $("#myTextArea1").show();
 $("#myTextArea2").hide();
}
else if(nettype ==3 || nettype == 4 )
{
 $("#myTextArea2").show();
 $("#myTextArea1").hide();
}`

For comment you have added to previous answer you can add following code

`if ( $('.myClass').filter(function(){
    return $(this).val() != '';
    }).length == 0
 )
 {
  /* code to run when all are empty */

 }`

you can add this classname myClass to your textboxes so that when all textboxes will be answered then you can fire code for radiobutton. :-)

Upvotes: 1

Related Questions