Change content of "p" and "img" when specific radio is selected

Question

I haven't got much experience in javascript. But I got a little slider and a lightbox, whose content should change when a specific radio is selected. So for example when the radio with id="id2" is selected, the content of the lightbox

 <div class="modal">
     <div class="modal__inner">
        <label class="modal__close" for="modal-1"></label>
            <img src="img/blabla.JPG">
            <p>blablabla</p>
     </div>
</div>

should be "blabla" and the source of the image "img/blabla.jpg".

But now when I select the 2nd radio with id="id3", the content should be "blopblop" and the source of the image "img/blopblop.jpg"...

Is that possible? I already got a code on my website, which changes the href of a link when a specific radio is selected:

 function myFunction() {
       if(document.getElementById('id2').checked) {
       document.getElementById('myLink').href = "infografik.html";
}

But I don't know how I should do it with "p" and "img"...

Thanks for your help!

[Element.innerHTML](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) — emerson.marini, Apr 19 '16 at 12:23
Possible duplicate of [Programmatically change the src of an img tag](http://stackoverflow.com/questions/11722400/programmatically-change-the-src-of-an-img-tag) — emerson.marini, Apr 19 '16 at 12:24
there are 5 radios which i use for a slider. the look like this '' the 'checked="checked"' is only on the radio which is selected by default — Tobias Glaus, Apr 19 '16 at 12:24

score 2 · Answer 1 · answered Apr 19 '16 at 12:43

You could use data attributes on the radio buttons like so:

<form>
  <input type="radio" class="changemodal" data-src="/my/img/1.jpg" data-p="Foo!">
  <input type="radio" class="changemodal" data-src="/my/img/2.jpg" data-p="Bar!">
</form>

<div class="modal">
  <img id="modal_img" src="">
  <p id="modal_p"></p>
</div>

You can then use attributes these in jQuery:

$('.changemodal').click(function(){
    $('#modal_img').attr('src', $(this).attr('data-src'));
    $('#modal_p').html($(this).attr('data-p'));
});

Instead of using `.html()` I would using `.text()`, but I like your idea of using the `data` attributes :) — node_modules, Apr 19 '16 at 12:45

Anonymous · Accepted Answer · 2016-04-19T13:23:23.773

So I have created a working solution. You can change it to what you desire.

Working solution !

var rad = document.myForm.myRadios;
var prev = null;

for (var i = 0; i < rad.length; i++) {
  rad[i].onclick = function() {
    document.getElementById('modal_p').innerHTML = this.value;
    document.getElementById("imgSrc").src = "img/" + this.value + ".JPG";
    document.getElementById('imgSrcP').innerHTML = "img/" + this.value + ".JPG";
  };
}

<form name="myForm">
  <input type="radio" name="myRadios" value="blabla" />Blabla
  <input type="radio" name="myRadios" value="blopblop" /> Blopblop
</form>

<div class="modal">
  <img id="imgSrc" src="img/blabla.JPG" />
  <p id="imgSrcP"></p>
  <p id="modal_p"></p>
</div>

The first paragraph with id "imgSrcP" can be removed. This is used to illustrate correct src for img. — Anonymous, Apr 19 '16 at 13:19

score 0 · Answer 3 · answered Apr 19 '16 at 12:30

0

Something like this..

$('.modal img').attr('src','blopblop.jpg');
$('.modal p').text('blopblop');

answered Apr 19 '16 at 12:30

Sharon

177
10

zaffer · Answer 4 · 2016-04-19T13:01:55.030

You can use $(selector).attr('src', 'image source') to dynamically change the image source and $(selector).text('new_text') to dynamically change the content of paragraph p.

The following code gives 3 radio buttons to do the required changes.

<html>

<head>
  <script src="https://code.jquery.com/jquery-2.2.3.js" integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=" crossorigin="anonymous"></script>
  <script>
    $(document).ready(function() {
      $("#id2").on("change", function() {
        if (document.getElementById("id2").checked) { // This confirms if the radio button is selected or not
          // change
          $('.modal img').attr('src', 'img/blabla.jpg'); // change image source
          $('.modal p').text('blabla'); // change paragraph content
        }
      });

      // Similarly for id3
      $("#id3").on("change", function() {
        if (document.getElementById("id3").checked) {
          // change  image and paragraph
          $('.modal img').attr('src', 'img/blopblop.jpg');
          $('.modal p').text('blopblop');
        }
      });

      // For id1 - returning back to default state
      $("#id1").on("change", function() {
        if (document.getElementById("id1").checked) {
          // change  image and paragraph
          $('.modal img').attr('src', 'img/blablabla.jpg');
          $('.modal p').text('blablabla');
        }
      });
    });
  </script>
</head>

<body>
  <form action="">
    <input type="radio" name="truth" id="id2" value="0">BlaBla
    <input type="radio" name="truth" id="id3" value="1">BlopBlop
    <input type="radio" name="truth" id="id1" value="2">BlaBlaBla
  </form>
  <div class="modal">
    <div class="modal__inner">
      <label class="modal__close" for="modal-1"></label>
      <img src="img/blablabla.jpg">
      <p>blablabla</p>
    </div>
  </div>
</body>

</html>

Explain your code, what does it? What have you changed, added or removed or why should OP using this code? :) — node_modules, Apr 19 '16 at 12:52
id did exactly the same but it wont work :/ is it possible that other ' — Tobias Glaus, Apr 19 '16 at 14:57
Are you loading jquery before using this script ? Can you make a running snippet of your code here ? — zaffer, Apr 19 '16 at 16:29

Change content of "p" and "img" when specific radio is selected

4 Answers4