Jon8RFC Jon8RFC - 5 months ago 21
Javascript Question

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

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');

Answer

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.