views:

12127

answers:

8

I've got code similar to the following...

<p><label>Do you have buffet facilities?</label>
  <asp:RadioButtonList ID="blnBuffetMealFacilities:chk" runat="server">
    <asp:ListItem Text="Yes" Value="1"></asp:ListItem>
    <asp:ListItem Text="No" Value="0"></asp:ListItem>
  </asp:RadioButtonList></p>
<div id="HasBuffet">
  <p><label>What is the capacity for the buffet?</label>
  <asp:RadioButtonList ID="radBuffetCapacity" runat="server">
    <asp:ListItem Text="Suitable for upto 30 guests" value="0 to 30"></asp:ListItem>
    <asp:ListItem Text="Suitable for upto 50 guests" value="30 to 50"></asp:ListItem>
    <asp:ListItem Text="Suitable for upto 75 guests" value="50 to 75"></asp:ListItem>
    <asp:ListItem Text="Suitable for upto 100 guests" value="75 to 100"></asp:ListItem>
    <asp:ListItem Text="Suitable for upto 150 guests" value="100 to 150"></asp:ListItem>
    <asp:ListItem Text="Suitable for upto 250 guests" value="150 to 250"></asp:ListItem>
    <asp:ListItem Text="Suitable for upto 400 guests" value="250 to 400"></asp:ListItem>
  </asp:RadioButtonList></p>
</div>

I want to capture an event when the radio list blBuffetMealFacilities:chk changes client side and perform a slide down function on the HasBuffet div from jQuery. What's the best way to create this, bearing in mind there are several similar sections on the page, where I want questions to be revealed depending on a yes no answer in a radio list.

+10  A: 

this:

$('#rblDiv input').click(function(){
    alert($('#rblDiv input').index(this));
});

will get you the index of the radio button that was clicked (i think, untested) (note you've had to wrap your RBL in #rblDiv

you could then use that to display the corresponding div like this:

$('.divCollection div:eq(' + $('#rblDiv input').index(this) +')').show();

Is that what you meant?

Edit: Another approach would be to give the rbl a class name, then go:

$('.rblClass').val();
Andrew Bullock
Nice work - how would I get the selected value rather than the index of the input?
digiguru
doesnt my edit answer that? :)
Andrew Bullock
Because of the stupid way that WebForms builds the controls, I used jQuery to assign classes to the inputs/checkboxes and then used $('.classname').val() to get the currently selected value.
Rich Reuter
A: 

I don't test this example, but my problem is not the same what you show in this tutorial. I have a radiobuttonlist in a repeater control. So how I use your example because the ID will change. I write it in usercontrol so it automatic add prefix to the id of the control. Some one can show me the solution please! Thank you anyway!

gacon
Check the solution we used below.
digiguru
+1  A: 

Hi nguyen hiep - following is the code we eventually created. A breif explanation first. We used a "q_" for the div name wrapped around the radio button question list. Then we had "s_" for any sections. The following code loops through the questions to find the checked value, and then performs a slide action on the relevant section.

var shows_6 = function() {
  var selected = $("#q_7 input:radio:checked").val();
  if (selected == 'Groom') {
    $("#s_6").slideDown();
  } else {
    $("#s_6").slideUp();
  }
};
$('#q_7 input').ready(shows_6);
var shows_7 = function() {
  var selected = $("#q_7 input:radio:checked").val();
  if (selected == 'Bride') {
    $("#s_7").slideDown();
  } else {
    $("#s_7").slideUp();
  }
};
$('#q_7 input').ready(shows_7);
$(document).ready(function() {
  $('#q_7 input:radio').click(shows_6);
  $('#q_7 input:radio').click(shows_7);
});

<div id="q_7" class='question '><label>Who are you?</label> 
  <p>
    <label for="ctl00_ctl00_ContentMainPane_Body_ctl00_ctl00_chk_0">Bride</label>
    <input id="ctl00_ctl00_ContentMainPane_Body_ctl00_ctl00_chk_0" type="radio" name="ctl00$ctl00$ContentMainPane$Body$ctl00$ctl00$chk" value="Bride" />
  </p> 
  <p>
    <label for="ctl00_ctl00_ContentMainPane_Body_ctl00_ctl00_chk_1">Groom</label>
    <input id="ctl00_ctl00_ContentMainPane_Body_ctl00_ctl00_chk_1" type="radio" name="ctl00$ctl00$ContentMainPane$Body$ctl00$ctl00$chk" value="Groom" />
  </p> 

</div>

The following allows us to make the question mandatory...

<script type="text/javascript"> 
var mandatory_q_7 = function() {
  var selected = $("#q_7 input:radio:checked").val();
  if (selected != '') {
    $("#q_7").removeClass('error');
  }
};
$(document).ready(function() {
    $('#q_7 input:radio').click(function(){mandatory_q_7();});
});
</script>

Here's an example of the actual show / hide layer

<div class="section" id="s_6"> 
    <h2>Attire</h2> 
    ...
</div>
digiguru
A: 

Thank you digiguru very much! I still don't have time to test it right now, but I will post the result as soon as posible. I had write something base on your tutorial like that to make it clearly. Hope this helpful for someone

Hey

You choose Groom

ah

You choose Bride
gacon
oop If I have a list of radiobuttonlist about over ten of them. So many lines of code I have to write out. Anyone suggest the shortest way to solved this problem? Thank you very much!!
gacon
A: 

I founded a simple solution:

var Ocasiao = ""; $('#ctl00_rdlOcasioesMarcas input').each(function() { if (this.checked) { Ocasiao = this.value } });

Fujiy
thats a terrible idea, addressing the rbl by client id. You dont have control over the id. What happens if, in the future, you nest the rbl in a panel? Your id will be different and your js will break. fail.
Andrew Bullock
You can generate JS: <%=blnBuffetMealFacilities.ClientId%>
Fujiy
A: 

this is Awesome....very very nice code and its working for me...thankyou so much......

Bharath Reddy VasiReddy
+4  A: 

The simple way to retrieve checked value of RadioButtonList1 is:

$('#RadioButtonList1 input:checked').val()

Vinh
i tried it but not work but i use same search criteria in another way and it work : alert($('#<%= RadioButtonList1.ClientID %>').find('input:checked').val());
Space Cracker
A: 

Andrew Bullock solution works just fine, I just wanted to show you mine and add a warning.

//Works great

$('#<%= radBuffetCapacity.ClientID %> input').click(function (e) {
   var val = $('#<%= radBuffetCapacity.ClientID %>').find('input:checked').val();
   //Do whatever
});

//Warning - works in firefox but not IE8 .. used this for some time before a noticing that it didnt work in IE8... used to everything working in all browsers with jQuery when working in one.

$('#<%= radBuffetCapacity.ClientID %>').change(function (e) {
   var val = $('#<%= radBuffetCapacity.ClientID %>').find('input:checked').val();
   //Do whatever
});
Fischer