Question 307820 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Show multiple div IDs with other radio inputs when a radio button is 'checked'

I am a complete novice here – so will explain as best I can.
I have a form where I am asking a user to select their nearest city (radio input), if they select ‘London’ from the options, then I need 3x div IDs to display which contain some other radio inputs. All my code has unique IDs.

The issue I’m having is I can get the divs to display but if you try to select any of the radio options it automatically hides the divs no matter what you select.

This is my form HTML where ‘London’ is an option (I have custom radio buttons – hence the spans)

<label class="container" style="line-height: 1.5;">
      <input type="radio" id="NEAREST_CITY1" name="cd_NEAREST_CITY" value="London" initial="@NEAREST_CITY@" readonly="">
      London
      <span class="radioSelect"></span>
    </label><label class="container" style="line-height: 1.5;">
      <input type="radio" id="NEAREST_CITY2" name="cd_NEAREST_CITY" value="Manchester" initial="@NEAREST_CITY@" readonly="">
      Manchester
      <span class="radioSelect"></span>
    </label><label class="container" style="line-height: 1.5;">
      <input type="radio" id="NEAREST_CITY3" name="cd_NEAREST_CITY" value="Edinburgh" initial="@NEAREST_CITY@" readonly="">
      Edinburgh
      <span class="radioSelect"></span>
    </label>

my hidden divs are like this – I can’t have these under 1 div
Div 1:

<div id="London1" style="display:none">
<p style="margin: 0px; line-height: 1.5; padding-top: 20px;"><font face="belleza, sans-serif"><font><font style="font-size: 16px;"><b>Let us know your preferred London Location:</b></font></font></font></p>
</div>

Div 2:

<div id="London2" style="display:none">
<label class="container" style="line-height: 1.5;">
      <input type="radio" id="PREFERRED_LONDON1" name="cd_PREFERRED_LONDON" value="Air Street" initial="@PREFERRED_LONDON@" readonly="">
      Air Street
      <span class="radioSelect"></span>
    </label><label class="container" style="line-height: 1.5;">
      <input type="radio" id="PREFERRED_LONDON2" name="cd_PREFERRED_LONDON" value="Borough" initial="@PREFERRED_LONDON@" readonly="">
      Borough
      <span class="radioSelect"></span>
    </label>
</div>

Div 3:

<div id="London3" style="display:none">
<label class="container" style="line-height: 1.5;">
      <input type="radio" id="PREFERRED_LONDON3" name="cd_PREFERRED_LONDON" value="Guildhall" initial="@PREFERRED_LONDON@" readonly="">
      Guildhall
      <span class="radioSelect"></span>
    </label>
<label class="container" style="line-height: 1.5;">
      <input type="radio" id="PREFERRED_LONDON4" name="cd_PREFERRED_LONDON" value="Knightsbridge" initial="@PREFERRED_LONDON@" readonly="">
      Knightsbridge
      <span class="radioSelect"></span>
    </label>
</div>

Then the JavaScript/jQuery (not sure what this is TBH – went down a rabbit hole and can’t remember where I found a similar example)

<script>
$(document).ready(function() {
   $('input[type="radio"]').click(function() {
       if($(this).attr('id') == 'NEAREST_CITY1') {
            $("div[id*=London]").show();           
       }
       else {
            $("div[id*=London]").hide();   
       }
   });
});
</script>
Tags:

2

Answers


  1. 0

    Here is a cleaned up version. I have changed the event listener to only listen to clicks on the name=cd_NEAREST_CITY], otherwise any click on any radio would trigger the toggle

    Note I gave each of the divs a class="city" to be able to hide them all in one go.

    Also I removed the invalid readonly from the radios and changed to font to style. You should consider moving the inline styles to a style sheet

    $(function() {
  $('[name=cd_NEAREST_CITY]').on('click', function() {
    $('.city').hide()
    $(`div[id*=${this.value}]`).show();
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<label class="container" style="line-height: 1.5;">
  <input type="radio" id="NEAREST_CITY1" name="cd_NEAREST_CITY" value="London">
      London <span class="radioSelect"></span>
    </label>
<label class="container" style="line-height: 1.5;">
  <input type="radio" id="NEAREST_CITY2" name="cd_NEAREST_CITY" value="Manchester">
      Manchester
      <span class="radioSelect"></span>
    </label>
<label class="container" style="line-height: 1.5;">
  <input type="radio" id="NEAREST_CITY3" name="cd_NEAREST_CITY" value="Edinburgh">
      Edinburgh
      <span class="radioSelect"></span>
</label>

<div class="city" id="London1" style="display:none">
  <p style="margin: 0px; line-height: 1.5; padding-top: 20px; font-family: belleza, sans-serif;">
    <b style="font-size: 16px;">Let us know your preferred London Location:</b>
  </p>

</div>

<div class="city" id="London2" style="display:none">
  <label class="container" style="line-height: 1.5;">
      <input type="radio" id="PREFERRED_LONDON1" name="cd_PREFERRED_LONDON" value="Air Street">
      Air Street
      <span class="radioSelect"></span>
    </label><label class="container" style="line-height: 1.5;">
      <input type="radio" id="PREFERRED_LONDON2" name="cd_PREFERRED_LONDON" value="Borough">
      Borough
      <span class="radioSelect"></span>
    </label>
</div>

<div class="city" id="London3" style="display:none">
  <label class="container" style="line-height: 1.5;">
      <input type="radio" id="PREFERRED_LONDON3" name="cd_PREFERRED_LONDON" value="Guildhall">
      Guildhall
      <span class="radioSelect"></span>
    </label>
  <label class="container" style="line-height: 1.5;">
      <input type="radio" id="PREFERRED_LONDON4" name="cd_PREFERRED_LONDON" value="Knightsbridge">
      Knightsbridge
      <span class="radioSelect"></span>
    </label>
</div>
    Login or Signup to reply.
  2. 0

    if you are working on a form-heavy website I would consider using some free open-source library for forms like forms.js.

    body{
background: #eee
}
    <link href="https://cdn.jsdelivr.net/npm/@forms.js/core/css/index.css" rel="stylesheet"/>
<section id="form"></section>
<script type="module">
import { Form } from "https://esm.sh/@forms.js/core";

const form = new Form("form", {
  id:"form",
  schema: [
    {
      id: "city",
      type:"radio",
      label: "City:",
      schema: [
        {
          id:"london",
          value: "London",
          label: "London",
        },
        {
          id:"manchester",
          value: "Manchester",
          label: "Manchester",
        },
        {
          id:"edinburgh",
          value: "Edinburgh",
          label: "Edinburgh",
        },
      ]
    },
    {
      id: "street",
      type:"radio",
      label: "Let us know your preferred London Location:",
      conditions: (value, data) =>{
        return data.city === "London";
      },
      schema: [
        {
          id:"air_street",
          value: "Air Street",
          label: "Air Street"
        },
        {
          id:"borough",
          value: "Borough",
          label: "Borough"
        },
        {
          id:"guildhall",
          value: "Guildhall",
          label: "Guildhall"
        },
        {
          id:"knightsbridge",
          value: "Knightsbridge",
          label: "Knightsbridge"
        },
      ]
    }
  ]
});
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search