How to perform two results with a single $('#id').on('change', function);

Question

I have let's say sets of div:

<body>
<div id="div1" style="display: block">
    <p> paragraph here </p>``
    <img>
    <table></table>
</div>

<div id="div2" style="display: none">
    <p> paragraph here </p>
    <img>
    <table></table>
</div>

I surrounded each contents with div.

Now I have two radio buttons:

<label for="button1"> Button1 </label>
<input id="button1" name="button" type="radio" value="block">
<label for="button2"> Button2</label>
<input id="button2" name="button" type="radio" value="block">

Now what I want to do is to hide the current div and display the second div in place of the first div using .css(). The method I have now is:

$('#button1').on('change', function1);  
function function1() {
    let change1 = $('#button1').val();
        $('#div1').css('display', change1);

but here, when I tried the second button:

$('#button2').on('change',function2);   
function function2() {
    let change2 = $('#button2').val();
        $('#div2').css('display', change2);
        $('#div1').css('display', 'none');

but it doesn't work, it can only execute one or the other but not both of them. Anyone knows the problem? Thank you.

You have a typo in your div1 id attribute. Missing a closing quote. Also can you provide your button1 change logic? — Taplar, Nov 16 '17 at 19:09
Radio buttons? Won't they form a group and change all together? — Rauli Rajande, Nov 16 '17 at 19:10
Radio button 'change' fires for the one that is selected, not the one that is unselected. @RauliRajande — Taplar, Nov 16 '17 at 19:10
I edited it and included the first function. And yes, I am trying to toggle between them. — Tai Hena, Nov 16 '17 at 19:16

score 2 · Answer 1 · answered Nov 16 '17 at 19:12

If you want the radio button to change what div is visible, you can try with the code below.

$('[id^=button]').on('change', function() {
  $('[id^=div]').css('display', 'none');
  var id = $(this).attr("id").replace("button","");
  $("#div" + id).css('display', 'block');
});

$('[id^=button]').on('change', function() {
  $('[id^=div]').css('display', 'none');
  var id = $(this).attr("id").replace("button","");
  $("#div" + id).css('display', 'block');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" style=" display: block ">
  <p> paragraph here 1</p>
  <img>
  <table></table>
</div>

<div id="div2" style="display: none ">
  <p> paragraph here 2</p>
  <img>
  <table></table>
</div>

<label for="button1"> Button1 </label>
<input id="button1" name="button" type="radio" value="block ">
<label for="button2"> Button2</label>
<input id="button2" name="button" type="radio" value="block ">

If you want to make it a bit smarter try this code. I've changed the radio button value to div1 and div2

$('[id^=button]').on('change', function() {
  $('[id^=div]').css('display', 'none');
  $("#" + $(this).val()).css('display', 'block');
});

$('[id^=button]').on('change', function() {
  $('[id^=div]').css('display', 'none');
  $("#" + $(this).val()).css('display', 'block');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" style=" display: block ">
  <p> paragraph here 1</p>
  <img>
  <table></table>
</div>

<div id="div2" style="display: none ">
  <p> paragraph here 2</p>
  <img>
  <table></table>
</div>

<label for="button1"> Button1 </label>
<input id="button1" name="button" type="radio" value="div1">
<label for="button2"> Button2</label>
<input id="button2" name="button" type="radio" value="div2">

I haven't tried this yet, but may i know what is the [id^=button]? That kinda look new to me. Sorry — Tai Hena, Nov 16 '17 at 19:20
`^=` means that it will starting with. so example `id^=button` means it select all elements that has an id that start with button — Carsten Løvbo Andersen, Nov 16 '17 at 19:23
@TaiHena not sure why you would switch answer, since what i provided is more dynamic and will result in that you dont have to duplicate your code over and over again — Carsten Løvbo Andersen, Nov 17 '17 at 06:32

score 0 · Accepted Answer · 2017-11-16T19:31:00.320

0

Is this what you are trying for?

$('#btn1').click(function () {
  $('#div1').css('display', 'block')
  $('#div2').css('display', 'none')
})

$('#btn2').click(function () {
  $('#div2').css('display', 'block')
  $('#div1').css('display', 'none')
})

#div1, #div2 {
  width: 200px;
  border: 1px solid black;
}

#div1 p, #div2 p {
  line-height: 100px;
  text-align: center;
}

<div id="div1" style="display: none;">
  <p>paragraph in div 1</p>
</div>

<div id="div2" class="hidden">
    <p>paragraph in div 2</p>
</div>

<button id="btn1">Button 1</button>
<button id="btn2">Button 2</button>

<script src="https://unpkg.com/jquery"></script>

edited Nov 16 '17 at 19:31

answered Nov 16 '17 at 19:18

Yes, that is the result that I would want, but then since I was required to use .css() function, I can't do that. – Tai Hena Nov 16 '17 at 19:24
O God, this is what I was trying to do. Another thumbs up! Thank you! – Tai Hena Nov 16 '17 at 19:45

score 0 · Answer 3 · answered Nov 16 '17 at 19:21

Came up with this condensed change handler for both of them.

$('#button1, #button2').on('change', function(e) {
  var $divs = $('#div1, #div2');
  var targets = {
    button1: "#div1",
    button2: "#div2"
  };

  //get the div id by the button id
  $divs.not(targets[e.target.id]).hide();
  $divs.filter(targets[e.target.id]).css('display', e.target.value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" style="display: block">
  <p> paragraph here 1</p>
  <img>
  <table></table>
</div>

<div id="div2" style="display: none">
  <p> paragraph here 2</p>
  <img>
  <table></table>
</div>

<label for="button1"> Button1 </label>
<input id="button1" name="button" type="radio" value="block" checked>
<label for="button2"> Button2</label>
<input id="button2" name="button" type="radio" value="block">

score 0 · Answer 4 · answered Nov 16 '17 at 19:28

Adding some common classes and using the values of the radios would help simplify this

$('.button').on('change', function(e) {
  var val = this.value;
  $('.content').hide().filter('#div' + val).show();
  
})
// trigger event on checked radio on page load
.filter(':checked').change();

.content{display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" class="content">
  <p> paragraph here 1</p>
  <img>
  <table></table>
</div>

<div id="div2"  class="content">
  <p> paragraph here 2</p>
  <img>
  <table></table>
</div>

<label for="button1"> Button1 </label>
<input id="button1" class="button" name="button" type="radio" value="1" checked>
<label for="button2"> Button2</label>
<input id="button2"  class="button" name="button" type="radio" value="2">

How to perform two results with a single $('#id').on('change', function);

4 Answers4