1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 10:25 pm May 13, 2026

Forum Moderators: open

Message Too Old, No Replies

jQuery question

         

SilverLining

2:05 pm on Feb 17, 2011 (gmt 0)

10+ Year Member



Hi everyone,

I'm new to jQuery. What I'm trying to do is update the contents of a div, depending on which options are selected. I was able to get it working with the radio buttons, but I need a combination of this and the dropdown to display different options.

I was not able to combine the values (example below of what I wanted, but didn't work). 

$("input[@name='details_option']").change(function() && $("input[@name='more_details']").change(function()


So, I copied the whole function to get this part working. 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Check this out</title>
<!--script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script=-->
<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
// <![CDATA[
var details = "Details and Yes";
var detailsNo = "Details and No";
var detailsMore = "More details";
var Other = "Other";
$("input[@name='details_option']").change(function() {
if ($("input[@name='details_option']:checked").val() == '')
$('#displayDiv').html(Other);
else if (($("input[@name='details_option']:checked").val() == 'Details') && ($("input[@name='more_details']:checked").val() == 'Yes'))
$('#displayDiv').html(details);
else if (($("input[@name='details_option']:checked").val() == 'Details') && ($("input[@name='more_details']:checked").val() == 'No'))
$('#displayDiv').html(detailsNo);
else if ($("input[@name='details_option']:checked").val() == 'Self-Details')
$('#displayDiv').html(detailsMore);
else
$('#displayDiv').html(Other);
});
$("input[@name='more_details']").change(function() {
if ($("input[@name='details_option']:checked").val() == '')
$('#displayDiv').html(Other);
else if (($("input[@name='details_option']:checked").val() == 'Details') && ($("input[@name='more_details']:checked").val() == 'Yes'))
$('#displayDiv').html(details);
else if (($("input[@name='details_option']:checked").val() == 'Details') && ($("input[@name='more_details']:checked").val() == 'No'))
$('#displayDiv').html(detailsNo);
else if ($("input[@name='details_option']:checked").val() == 'Self-Details')
$('#displayDiv').html(detailsMore);
else
$('#displayDiv').html(Other);
});
switch ($('#number :selected').text()) {
case '1':
$('#displayDiv').html(detailsMore);
break;
$('#displayDiv').html(detailsNo);
break;
}
});
// ]]>
</script>
<!-- name="details_form" -->
<form id="details_form" method="post" action="#">
<table width="400" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<ol>
<!-- 1 -->
<li class="">Content 1...
<input type="radio" name="details_option" value="Details" /> Details
<input type="radio" name="details_option" value="More-Details" /> More Details
<input type="radio" name="details_option" value="Other" /> Other
</li>
<!-- 2 -->
<li class="">Content 2...
<input type="radio" name="more_details" value="Yes" /> Yes
<input type="radio" name="more_details" value="No" /> No
</li>
<!-- 3 -->
<li class="">Content 3...
<select name="number" id="number">
<option>Select</option>
<option value="1">1</option>
<option value="2">2</option> 
<option value="3">3</option>
</select>
</li>
</ol>
<div class="center_box" id="displayDiv">
Default data
</div>
</td>
</tr>
</table>
</form>
</body>
</html>


The dropdown/select box only updates on page-refresh. Any advice how to get this working and neaten/fix the code would be much appreciated.

Thanks

Fotiman

3:30 pm on Feb 17, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



This is how I would start: 


<script type="text/javascript" charset="utf-8">
// <![CDATA[
$(document).ready(function() {
  var details = "Details and Yes",
    detailsNo = "Details and No",
    detailsMore = "More details",
    Other = "Other";
  $("input[@name='details_option'],input[@name='more_details']").change(function() {
    var details_option = $("input[@name='details_option']:checked").val(),
      more_details = $("input[@name='more_details']:checked").val();
    if (details_option == '') {
      $('#displayDiv').html(Other);
    }
    else if ((details_option == 'Details') && (more_details == 'Yes')) {
      $('#displayDiv').html(details);
    }
    else if ((details_option == 'Details') && (more_details == 'No')) {
      $('#displayDiv').html(detailsNo);
    }
    else if (details_option == 'Self-Details') {
      $('#displayDiv').html(detailsMore);
    }
    else {
      $('#displayDiv').html(Other);
    }
    switch ($('#number :selected').text()) {
    case '1':
      $('#displayDiv').html(detailsMore);
      break;
    default:
      $('#displayDiv').html(detailsNo);
      break;
    }
  });
});
// ]]>
</script>


Things to note:
1. Your opening "// <![CDATA[" line was in the wrong place. I moved it up to be the first thing within the <script>. A better solution would be to move the script to an external file and eliminate this part altogether.

2. Ask yourself whether XHTML is really what you want to be using here. If it looks like HTML, smells like HTML, and you're serving it at text/html, then it IS HTML (in which case an HTML 4.01 or HTML5 doctype might be more appropriate). But that argument can lead to large debates. My advice, just do a little looking around to determine if you're really going to be "extending" the HTML namespace, and if not, then you don't need XHTML.

3. I've combined the selectors for attaching your change event handler. See the jQuery docs: [api.jquery.com...]

4. I've stored some of the items in local variables (for example, details_option = $("input[@name='details_option']:checked").val()). This way you're not repeating that jQuery selector over and over just to get the same value.

5. It's good practice to always wrap if/else blocks with { }, even if they're only one line.

6. Your switch/case was malformed. I added the missing "default:" which I can only guess was your intended behavior.

7. I moved the switch statement to be within the change event function handler. If this needs to execute at another time as well (for example, on page load), then consider putting it into a function of it's own and calling that function in the appropriate places.

Hope this helps.

SilverLining

8:09 am on Feb 18, 2011 (gmt 0)

10+ Year Member



Thank you Fotiman.

The Doctype is preset in our presentation templates.

Thanks for combining the selectors - this is exactly what I was looking for.

The "Self-Details" in my code, should change to "More-Details".

Your code is a great improvement (thanks), but I can't seem to get it working as expected. Selecting "Details" and "Yes" does not display "Details and Yes".

Also, for each combination a different div will be displayed, so the logic will need to be right e.g. Details/Yes/1 will display a certain results and More/Details/No/1 will display a different result.

Could you please explain how I can use console.log troubleshoot the output?

Fotiman

1:03 pm on Feb 18, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Before resorting to console.log, I almost always end up taking a look with Firebug [getfirebug.com]. You can set breakpoints in the scripts and watch variables. In the code above, I set a break point and then saw that it DOES change the value to 'Details and Yes', but then it hits the bit of code where it does the switch statement, and the default ends up resetting it to 'Details and No'.

So I think it would help to better understand what the expected behavior is, particularly with regards to the select element and the switch statement.

Also, if you add console.log statements, you can view the output in the Console portion of Firebug as well. For example, you might do this: 


  else if ((details_option == 'Details') && (more_details == 'Yes')) {
   $('#displayDiv').html(details);
   console.log(details);
  }

SilverLining

3:40 pm on Feb 21, 2011 (gmt 0)

10+ Year Member



Thanks again. I managed to get it working like this (no need for the switch); 

<script type="text/javascript" charset="utf-8">
// <![CDATA[
$(document).ready(function() {
 var details = "Details and Yes",
 detailsNo = "Details and No",
 detailsMore = "More details",
 Other = "Other";
 $("input[@name='details_option'],input[@name='more_details'],select[@name='number']").change(function() {
 var details_option = $("input[@name='details_option']:checked").val(),
 more_details = $("input[@name='more_details']:checked").val(),
 number = $("#number option:selected").text();
 if ((details_option == 'Details') && (more_details == 'Yes') && (number == '2')) {
 $('#displayDiv').html(details);
 }
else if ((details_option == 'Details') && (more_details == 'Yes') && (number == '1')) {
 $('#displayDiv').html(detailsMore);
 }
else if ((details_option == 'Details') && (more_details == 'No') && (number == '3')) {
 $('#displayDiv').html(detailsNo);
 }
 else {
 $('#displayDiv').html(Other);
 }
 });
});
// ]]>
</script>


One last question: how can one display a combination of say details and detailsNo in #displayDiv. I tried a few varieties, but was not successful.

Fotiman

3:43 pm on Feb 21, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



In the .html() method you pass in whatever you want the new value to be. Not sure what combination you're trying to do, but something like this:

$('#displayDiv').html(details + detailsNo);

would results in the "Details and YesDetails and No". Whatever text string you pass in is what will get output.

SilverLining

6:05 am on Feb 22, 2011 (gmt 0)

10+ Year Member



Thanks for your continued help with this, Fotiman. Basics, basics.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 10:25 pm May 13, 2026