jQuery Show div when radio button is clicked with id instead of value

Question

This code works, but not like I want it to work. Now it is taking the value to open, I want it to use the id to open. I can't use "Ja" constantly as value because i have multiple value's "Ja"(not shown in the code below).

    $( document ).ready( function () {
      $( "input[name=group8" ).change( function() {
        var test8 = $( this ).val();
        $( ".desc" ).hide();
        $( "#" + test8 ).show();
      } );
    } );

.desc {
      display: none;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="form10" id="my_form10" method="post" action="" >
      <h5>Wil je keukenplinten laten inkorten na het leggen van de vloer?</h5>
      <div class="radio8">
        <div class="janee">
          <input id="JA7" type="radio" name="group8" value="Ja">
          <label for="JA7" class="form-field__radio__label">Ja, meerprijs € 20.00 per plint</label><br>
          <input id="NEE7" type="radio" name="group8" value="Nee">
          <label for="NEE7">Nee</label>
        </div>
      </div>
    </form>
    
    <form id="keukenplinten">
      <div id="Ja" class="desc" style="float: inherit;">
        <h5>Hoeveel keukenplinten wil je laten inkorten?</h5>
        <input type="number" id="keukenplintenInkorten" name="keukenplinten">
      </div>
    </form>

you have a missing square bracket and no quotes here `$( "input[name=group8" )` should be `$( "input[name='group8']")` — Fabrizio Calderan, Dec 07 '18 at 12:59
You wouldn't be able to use the id as if you did that would mean you would have multiple elements with that id and ids should be unique — Pete, Dec 07 '18 at 13:02
@Gumpy: Define "doesn't work". When you debug, how specifically does it fail? Does `$("input[name=group8")` find any elements in the first place? Is the `change` handler ever invoked? What happens on each line in that handler when you debug? — David, Dec 07 '18 at 13:08

score 0 · Answer 1 · edited Dec 07 '18 at 13:02

0

You might try $(this).attr('id') instead of $(this).val().

edited Dec 07 '18 at 13:02

Toby

12,743
8
43
75

answered Dec 07 '18 at 13:00

EdgarWahn

1

score 0 · Answer 2 · answered Dec 07 '18 at 13:05

0

I guess you want the 'test8' variable to take the value of the element selected ID , in that case you can use:

var test8 = $( this ).attr('id')

You can read here a detailed explanation: How can I get the ID of an element using jQuery?

answered Dec 07 '18 at 13:05

Alex Ciu

148
1
6

1

why not just `this.id` more efficient as a) you don't turn `this` into a jquery object, b) you don't then need to run the attr function on that object – Pete Dec 07 '18 at 13:09

score 0 · Accepted Answer · answered Dec 07 '18 at 13:07

Use this way

$( document ).ready( function () {
  $( "input[name=group8" ).change( function() {
    var test8 = $(this).attr('id')
    $( ".desc" ).hide();
    $( "#form_"  + test8 ).show();
  } );
} );

<form id="keukenplinten">
  <div id="form_JA7" class="desc" style="float: inherit;"> <!-- Change ID this Way-->
    <h5>Hoeveel keukenplinten wil je laten inkorten?</h5>
    <input type="number" id="keukenplintenInkorten" name="keukenplinten">
  </div>
</form>

http://jsfiddle.net/sj2bm5av/2/

score 0 · Answer 4 · answered Dec 07 '18 at 13:12

If you want to use ID attribute of the clicked element for next steps, you can use following :

  $( document ).ready( function () {
  $( "input[name=group8" ).change( function() {
    var test8 = $( this ).attr("id");
    $( ".desc" ).hide();
    $( "#" + test8 ).show();
  } );
} );

But here test8 will have the element with ID "Ja7", that tries to call $( "#Ja7" ) . This ID is used for radio element. Hence you need to use a different ID for div i.e. "div_Ja7"

P.S. Each element has a unique ID. You can't assign same ID to multiple elements.

yunzen · Answer 5 · 2018-12-07T13:30:21.197

I suggest you add a data-trigger (name by me) attribute to the .desc element.

This says, which element has to have which value to show this element

jQuery(function($) {
  $("input[name=group8").change(function() {
    var id = $(this).attr('id'); 
    var val = $(this).val();
    var selector = '[data-trigger="#' + id + ':' + val + '"]'
    $(".desc").hide();
    $(selector).show();
  });  
});

.desc {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="form10" id="my_form10" method="post" action="">
  <h5>Wil je keukenplinten laten inkorten na het leggen van de vloer?</h5>
  <div class="radio8">
    <div class="janee">
      <input id="JA7" type="radio" name="group8" value="Ja">
      <label for="JA7" class="form-field__radio__label">Ja, meerprijs € 20.00 per plint</label><br>
      <input id="NEE7" type="radio" name="group8" value="Nee">
      <label for="NEE7">Nee</label>
    </div>
  </div>
</form>

<form id="keukenplinten">
  <div id="Ja" data-trigger="#JA7:Ja" class="desc" style="float: inherit;">
    <h5>Hoeveel keukenplinten wil je laten inkorten?</h5>
    <input type="number" id="keukenplintenInkorten" name="keukenplinten">
  </div>
</form>

score 0 · Answer 6 · answered Dec 07 '18 at 13:19

I will suggest please introduce new attribute on "input" like "data-id" (it will allow assign same value for multiple input), see below code

 <form name="form10" id="my_form10" method="post" action="" >
  <h5>Wil je keukenplinten laten inkorten na het leggen van de vloer?</h5>
  <div class="radio8">
    <div class="janee">
      <input id="JA7" data-id="ABC1" type="radio" name="group8" value="Ja">
      <label for="JA7" class="form-field__radio__label">Ja, meerprijs € 20.00 per 
       plint</label><br>
      <input id="NEE7" data-id="ABC2" type="radio" name="group8" value="Nee">
      <label for="NEE7">Nee</label>
    </div>
  </div>
</form>
<form id="keukenplinten">
  <div id="ABC1" class="desc" style="float: inherit;">
    <h5>Hoeveel keukenplinten wil je laten inkorten?</h5>
    <input type="number" id="keukenplintenInkorten" name="keukenplinten">
  </div>
</form>

And Use in Jquery:

    $( document ).ready( function () {
      $( "input[name=group8" ).change( function() {
        var test8 = $( this ).attr("data-id");
        $( ".desc" ).hide();
        $( "#" + test8 ).show();
      });
   } );

jQuery Show div when radio button is clicked with id instead of value

6 Answers6