如何使用jQuery / JavaScript检测多组单选按钮更改并更改单独的表单输入？

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

Answer 1

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.

Answer 2

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