Use jquery to display div based on form value selected

Question

I want to display a div if a certain radio button in a form is selected, but hide that div if any other radio button in the form is selected, using jquery.

This is the code I have that isn't working:

$("select").change(function(){
if($("#radio1").is(":selected")){
    $("#grid_9 omega").slideDown("slow");
} else { $("#grid_9 omega").slideUp("slow"); } 
});

where the id for the radio button I want to have display the div "gid_9 omega" is "radio1".

Thanks for your help!

stackoverflow.com/questions/3997905/… similar idea

1321941
– 1321941

2012-06-27 00:09:58 +00:00
Commented Jun 27, 2012 at 0:09 — 1321941
– 1321941, Commented Jun 27, 2012 at 0:09

SuperMykEl · Accepted Answer · 2012-06-27 02:20:16Z

2

I took the liberty of thinking that maybe omega was a class that you were referring to incorrectly.

First, there is no select here so that is not going to work for you. You need to test on all input[type=radio].

Next, radio button attribute for selected is actually checked=checked, so you need to test if the one you want to be checked is checked. If not, do nothing, if so, show your div.

A JSFiddle

Using a similar html structure to this below:

<form id="form1" name="form1" method="post" action="">
  <p>
    <label>
      <input type="radio" name="RadioGroup1" value="radio1" id="radio1" />
      Radio 1</label>
    <br />
    <label>
      <input type="radio" name="RadioGroup1" value="radio2" id="radio2" />
      Radio 2</label>
    <br />
    <label>
      <input type="radio" name="RadioGroup1" value="radio3" id="radio3" />
      Radio 3</label>
    <br />
  </p>
</form>
<div id="grid_9" class="omega" style="display:none">show me when Radio 1 is chosen

your js would look like this:

$(document).ready(function() {
    $("input[type=radio]").on('click', function(){
        if ($('#radio1').is(':checked')){
            $("#grid_9.omega").slideDown("slow");
        } else { 
            $("#grid_9.omega").slideUp("slow");
        }
    });
});

edited Jun 27, 2012 at 2:20

answered Jun 27, 2012 at 0:35

SuperMykEl

6233 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1484219 Over a year ago

I implemented that code and it still doesn't work on the web page in question: intelligradeeducation.com/site_pro/tester.php

SuperMykEl Over a year ago

try enclosing it in a $(document).ready(function() {} );. I have change the js code to show you.

Ram · Accepted Answer · 2012-06-27 03:11:07Z

0

you should not use space between characters of an ID name, also a select element has nothing to do with radio buttons, try this:

$("#radio1").change(function(){
if($(this).is(":checked")) {
    $(".omega").slideDown("slow"); // note that `omega` has no "hash" or "dot" sign and this returns undefined
} else if ($('.omega').is(':visible')) { // makes sure that omega is visible
   $(".omega").slideUp("slow"); 
} 
});

edited Jun 27, 2012 at 3:11

answered Jun 27, 2012 at 0:20

Ram

145k16 gold badges174 silver badges201 bronze badges

5 Comments

user1484219 Over a year ago

I changed the name of the div to ensure there were no spaces in the ID name, but that code still doesn't work.

Ram Over a year ago

@user1484219 what is the markup? can you provide a jsfiddle?

user1484219 Over a year ago

Here's the URL of the web page: intelligradeeducation.com/site_pro/tester.php.

Ram Over a year ago

@user1484219 try updated answer, sounds that omega is a class.

charlietfl Over a year ago

a radio will never match :selected , no such property for radio, use :checked

Collectives™ on Stack Overflow

Use jquery to display div based on form value selected

2 Answers 2

2 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related