How do I use jQuery/JavaScript to detect multiple sets of radio button changes and change a separate form input?

Question

The situation is that I have nine unique values for PayPal "add to cart" that I'm trying to place into a single HTML input tag, determined by the combination of choices from two sets of radio buttons (three radio buttons in each set).

The HTML could be slightly different, and the only reason it looks how it is now, is because I've been tinkering with various scripts trying to find a working method. The scripting could probably be much simpler, but I'd just like some help with understanding how to make it function (regardless of which radio buttons are changed, or how many times).

<form id="prod_size">
<input type="radio" name="size" value="1">small</input>
<input type="radio" name="size" value="4" checked="checked">medium</input>
<input type="radio" name="size" value="16">large</input>
</form>
<form id="prod_bundle">
<input type="radio" name="prod_bundle" value="single">single</input>
<input type="radio" name="prod_bundle" value="double">double</input>
<input type="radio" name="prod_bundle" value="triple" checked="checked">triple</input>
</form>
<form>
<input id="cart_button_value" value="green">
</form>

I don't see any errors in the browser console. Everything below is frankensteined from multiple code examples on stackoverflow/stackexchange, because I couldn't find a working solution by itself, unfortunately.

$("#prod_size , #prod_bundle").on('change', function() {
if ('#prod_size' == '1'){
    if ("#prod_bundle".value == 'single'){
        $("#cart_button_value").val = 'red';
    }
    else if ("#prod_bundle".value == 'double'){
        $("#cart_button_value").val = 'green';
    }
    else if ("#prod_bundle".value == 'triple'){
        $("#cart_button_value").val = 'blue';
    }
}
else if ('#prod_size' == '4'){
    if ("#prod_bundle".value == 'single'){
        $("#cart_button_value").val = 'black';
    }
    else if ("#prod_bundle".value == 'double'){
        $("#cart_button_value").val = 'white';
    }
    else if ("#prod_bundle".value == 'triple'){
        $("#cart_button_value").val = 'gray';
    }
}
else if ('#prod_size' == '16'){
    if ("#prod_bundle".value == 'single'){
        $("#cart_button_value").val = 'orange';
    }
    else if ("#prod_bundle".value == 'double'){
        $("#cart_button_value").val = 'purple';
    }
    else if ("#prod_bundle".value == 'triple'){
        $("#cart_button_value").val = 'pink';
    }
}
}).trigger('change');

"#prod_bundle".value ... I don't think that line works, also you are searching for vals like single or double that you don't have. — DaniP
– DaniP, Commented Jun 13, 2016 at 20:03
Oops, thanks. Corrected my code above for the single/double/triple. I copied from two different attempts by mistake. Do you have any suggestion for the "#prod_bundle".value portion? That's something I've copied from elsewhere on stackoverflow/exchange, so I'm not sure where the error is. — Jon8RFC
– Jon8RFC, Commented Jun 13, 2016 at 20:10
Check this jsfiddle.net/606468bu works with the first value "small" — DaniP
– DaniP, Commented Jun 13, 2016 at 20:25
Whoa, that fiddle is great! It allowed me to learn what was going on by finishing off the other parts, and the code wasn't obfuscated, so I could see what was going on as well. Thank you very much! — Jon8RFC
– Jon8RFC, Commented Jun 13, 2016 at 21:01

m-a-r-c-e-l-i-n-o · Accepted Answer · 2016-06-13 20:46:28Z

Your train of thought is somewhat on the right path, but there are number of errors in your code. For instance, "#prod_bundle".value is not a valid statement. The only reason why you are not seeing errors is because your first level if statements inside the "onChange" function will never evaluate to true, and thus the code inside them never runs. This is so because you are comparing two literal strings, and string:'#prod_size' == string:'1' can never equal one another.

At any rate, here's a way to go about it:

// comments are in reference to the code OP posted

// there is no need to fetch dom elements every time you need them
// store them in variables when the need to use them arises
var $prodSize = $('#prod_size')
var $prodBundle = $('#prod_bundle')
var $cartButton = $("#cart_button_value")

// creating a separate function to handle the change
// is not strictly necessary, but it makes things a bit cleaner
function handleOnChange() {

  // find the selected size option and get its value
  // size will contain "1", "4", or "16"
  var size = $prodSize.children(':checked').val()
  // find the selected bundle option and get its value
  // bundle will contain "single", "double", or "triple"
  var bundle = $prodBundle.children(':checked').val()
  // create a value variable to grab the desired color
  // to insert into the "cart button" input.
  var value = ''
  
  // make comparisons, similar to what you were doing
  // except now we are using variables
  if (size == 1){
    
    if (bundle === 'single') value = 'red';
    else if (bundle === 'double') value = 'green';
    else if (bundle === 'triple') value = 'blue';
    
  } else if (size == 4){
    
    if (bundle === 'single') value = 'black';
    else if (bundle === 'double') value = 'white';
    else if (bundle === 'triple') value = 'gray';
    
  } else if (size == 16){
    if (bundle === 'single') value = 'orange';
    else if (bundle === 'double') value = 'purple';
    else if (bundle === 'triple') value = 'pink';
  }
  
  // update the cart button input with whatever color was picked
  $cartButton.val(value)
}

// attach the on change events
$prodBundle.on('change', handleOnChange)
$prodSize.on('change', handleOnChange)

// trigger it for the first time
$prodSize.trigger('change')

<form id="prod_size">
<input type="radio" name="size" value="1">small</input>
<input type="radio" name="size" value="4" checked="checked">medium</input>
<input type="radio" name="size" value="16">large</input>
</form>
<form id="prod_bundle">
<input type="radio" name="prod_bundle" value="single">one</input>
<input type="radio" name="prod_bundle" value="double">two</input>
<input type="radio" name="prod_bundle" value="triple" checked="checked">three</input>
</form>
<form>
<input id="cart_button_value" value="green">
</form>
<script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0="   crossorigin="anonymous"></script>

I hope that helps.

Great! Thank you for the detailed comments in your code and the explanation of failure points in my own code. That's very helpful and it works perfectly!
Awesome! Please consider marking this answer as correct (by pressing the grey check mark on the top-left of this post).

Juan Santiago Arango Giraldo · Accepted Answer · 2016-06-13 20:33:34Z

1

I got another one: Use data attributes to set the values that you want to show on the input, and then ask for them..

<form id="prod_size">
<input type="radio" name="size" value="one">small</input>
<input type="radio" name="size" value="four" checked="checked">medium</input>
<input type="radio" name="size" value="sixteen">large</input>
</form>
<form id="prod_bundle">
<input type="radio" name="prod_bundle" value="single" data-one="red" data-four="black" data-sixteen="orange">single</input>
<input type="radio" name="prod_bundle" value="double" data-one="green" data-four="white" data-sixteen="purple">double</input>
<input type="radio" name="prod_bundle" value="triple" data-one="blue" data-four="gray" data-sixteen="pink" checked="checked">triple</input>
</form>
<form>
<input input id="cart_button_value" value="green"/>
</form>

And the javascript function should be like this...

$(function(){
$('[name="size"]').change(changeInputVal);
$('[name="prod_bundle"]').change(changeInputVal);

function changeInputVal(){
    var sizeSelected = $('input[name="size"]:checked', 'form#prod_size').val();
    var valueToInput = $('input[name="prod_bundle"]:checked', 'form#prod_bundle').data(sizeSelected);
    $("#cart_button_value").val(valueToInput);
  }
});

I hope this could help you

answered Jun 13, 2016 at 20:33

Juan Santiago Arango Giraldo

351 silver badge6 bronze badges

1 Comment

Jon8RFC Over a year ago

This is an interesting take on the problem I had, and something that I had no idea was possible. Thank you for the new information!

Collectives™ on Stack Overflow

How do I use jQuery/JavaScript to detect multiple sets of radio button changes and change a separate form input?

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related