Using JQuery to apply an action from a radio button list to an image

Question

I'm trying to create a program that allows the user to choose an action to apply to an image. I'm using a radio button list to assign the action. I'm having a difficult time trying to get my JQuery code to apply the selected effect to the image. It either doesn't pass the value of the radio button, or it does pass it, but never changes after the first selection. Any advice is greatly appreciated.

    $(function(){
 //when the "apply" button is clicked, it will apply the selected effect, from the menu, to the image.
 $('#applyBtn').on('click', function () {
  if(checkedEffect.value == 'Hide' && checkedEffect.checked) 
   $('img').hide();
   
  else if(checkedEffect.value == 'Show' && checkedEffect.checked)
   $('img').show('fast');
  
  else if(checkedEffect.value == 'Toggle' && checkedEffect.checked)
   $('img').toggle();
  
  else if(checkedEffect.value == 'Fade_out' && checkedEffect.checked)
   $('img').fadeOut();
  
  else if(checkedEffect.value == 'Fade_in' && checkedEffect.checked)
   $('img').fadeIn();
  
  else if(checkedEffect.value == 'Slide_up' && checkedEffect.checked)
   $('img').slideUp();
  
  else if(checkedEffect.value == 'Slide_down' && checkedEffect.checked)
   $('img').slideDown();
  
  else if(checkedEffect.value == 'Slide_toggle' && checkedEffect.checked)
   $('img').slideToggle();
  
  else if(checkedEffect.value == 'Fade_to' && checkedEffect.checked)
   $('img').fadeTo();
 });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class = "effectsForm">
  <input type = "radio" name = "manip" id = "manip" value = "Hide"> Hide<br/>
  <input type = "radio" name = "manip" id = "manip" value = "Show"> Show<br/>
  <input type = "radio" name = "manip" id = "manip" value = "Toggle"> Toggle<br/>
  <input type = "radio" name = "manip" id = "manip" value = "Fade_out"> Fade out<br/>
  <input type = "radio" name = "manip" id = "manip" value = "Fade_in"> Fade in<br/>
  <input type = "radio" name = "manip" id = "manip" value = "Slide_up"> Slide up<br/>
  <input type = "radio" name = "manip" id = "manip" value = "Slide_down"> Slide down<br/>
  <input type = "radio" name = "manip" id = "manip" value = "Slide_toggle"> Slide toggle<br/>
  <input type = "radio" name = "manip" id = "manip" value = "Fade_to"> Fade to<br/>

  <button type = "button" id = "applyBtn">Apply</button>
</form>

<div class = "imageContainer">
  <img alt="testing" src="images\testing.jpg"/>
</div>

forgot to add the var within the function: var checkedEffect = document.getElementById('manip'); — Messja93, Oct 08 '18 at 19:53
Side note, IDs **must** be unique. Actually, that's not a side note, that's your issue. — j08691, Oct 08 '18 at 19:54
@Flame See the first comment (which the OP should edit the question with) — j08691, Oct 08 '18 at 19:56
See https://stackoverflow.com/questions/24123707/getelementbyid-returning-value-only-for-first-element for more information on what @j08691 is discussing. — Heretic Monkey, Oct 08 '18 at 20:15

Jeto · Answer 1 · 2018-10-08T20:10:15.723

To make this work without changing anything else (otherwise, see other answers), you can change the checkEffect value to the following:

var checkedEffect = $(this).closest('form').find('input[name=manip]:checked')[0];

$(function() {
  $('#applyBtn').on('click', function() {
    var checkedEffect = $(this).closest('form').find('input[name=manip]:checked')[0];
    if (checkedEffect.value == 'Hide' && checkedEffect.checked)
      $('img').hide();

    else if (checkedEffect.value == 'Show' && checkedEffect.checked)
      $('img').show('fast');

    else if (checkedEffect.value == 'Toggle' && checkedEffect.checked)
      $('img').toggle();

    else if (checkedEffect.value == 'Fade_out' && checkedEffect.checked)
      $('img').fadeOut();

    else if (checkedEffect.value == 'Fade_in' && checkedEffect.checked)
      $('img').fadeIn();

    else if (checkedEffect.value == 'Slide_up' && checkedEffect.checked)
      $('img').slideUp();

    else if (checkedEffect.value == 'Slide_down' && checkedEffect.checked)
      $('img').slideDown();

    else if (checkedEffect.value == 'Slide_toggle' && checkedEffect.checked)
      $('img').slideToggle();

    else if (checkedEffect.value == 'Fade_to' && checkedEffect.checked)
      $('img').fadeTo();
  });
});

.as-console-wrapper { max-height: 100% !important; top: 0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="effectsForm">
  <input type="radio" name="manip" id="manip" value="Hide"> Hide<br/>
  <input type="radio" name="manip" id="manip" value="Show"> Show<br/>
  <input type="radio" name="manip" id="manip" value="Toggle"> Toggle<br/>
  <input type="radio" name="manip" id="manip" value="Fade_out"> Fade out<br/>
  <input type="radio" name="manip" id="manip" value="Fade_in"> Fade in<br/>
  <input type="radio" name="manip" id="manip" value="Slide_up"> Slide up<br/>
  <input type="radio" name="manip" id="manip" value="Slide_down"> Slide down<br/>
  <input type="radio" name="manip" id="manip" value="Slide_toggle"> Slide toggle<br/>
  <input type="radio" name="manip" id="manip" value="Fade_to"> Fade to<br/>

  <button type="button" id="applyBtn">Apply</button>
</form>

<div class="imageContainer">
  <img alt="testing" src="images\testing.jpg" />
</div>

There are many other things weird/wrong with your code, for instance:

you cannot have the same ID more than once (as mentioned in the comments)
you could probably avoid checking for every single value and do what you're looking for in a single statement (storing appropriate values and/or data attributes on each radio button)
you could retrieve the input's value with .val()
you don't need to check for checked property again
etc.

... but this should fix the problem you're having at the very least.

epascarello · Answer 2 · 2018-10-08T20:06:33.747

The code can be simplified by using the value as the method.

var img = $('img');

// or do it when it is clicked.
$('button').on('click', function () {
   const action = $('[name="manip"]:checked').val()
   img.stop()
   img[action]()
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="effectsForm">
  <label><input type="radio" name="manip" value="hide"> Hide</label>
  <label><input type="radio" name="manip" value="show"> Show</label>
  <label><input type="radio" name="manip" value="fadeOut"> Fade Out</label>
  <label><input type="radio" name="manip" value="fadeIn"> Fade In</label>
</form>

<button type="button">Apply</button>

<div class="imageContainer">
  <img alt="testing" src="http://placekitten.com/200/300" />
</div>

Showing it with change

var img = $('img');
// If you want to run it when radio is selected
$('[name="manip"]').on('change', function () {
  img.stop()
  img[this.value]()
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="effectsForm">
  <label><input type="radio" name="manip" value="hide"> Hide</label>
  <label><input type="radio" name="manip" value="show"> Show</label>
  <label><input type="radio" name="manip" value="fadeOut"> Fade Out</label>
  <label><input type="radio" name="manip" value="fadeIn"> Fade In</label>
</form>

<div class="imageContainer">
  <img alt="testing" src="http://placekitten.com/200/300" />
</div>

Using JQuery to apply an action from a radio button list to an image

2 Answers2