JS: Radio buttons - dynamically generated based on selection

Question

I have a problem how to describe that, hope you get what I want to say:

Let's say: what are your top two car brands:

I chose #1 from: Audi, VW, BWM, Jaguar (it's BWM)

For #2 the options should be same without BMW: Audi, VW, Jaguar

How can I deduct choice #1 from the 2nd options field?

Any hint is appreciated!

(I usually write PHP, but I like to achieve that without screen reload, I know JS can probably do that, but I lack that skill)

Answer 1

This example is using jQuery library and it works in a following way:

If you choose something from fieldset 1 it just hide's similar input from another fieldset.

Also it hides label that is located near input tag.

You can run this snippet to find how it works.

 $("input[name=cars_0]").change(function(){ var val = $(this).val(); // Show everything before hiding new one $("input[name=cars_1]").show() .prev('label').show(); // Hide input tag based on value $("input[name=cars_1][value="+val+"]").hide() .prev('label').hide(); //Hide label tag });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <fieldset> <label for="audi_0">Audi</label> <input id="audi_0" type="radio" name="cars_0" value="audi"> <label for="bmw_0">BMW</label> <input id="bmw_0" type="radio" name="cars_0" value="bmw"> <label for="jaguar_0">Jaguar</label> <input id="jaguar_0" type="radio" name="cars_0" value="jaguar"> </fieldset> <fieldset> <label for="audi_1">Audi</label> <input id="audi_1" type="radio" name="cars_1" value="audi"> <label for="bmw_1">BMW</label> <input id="bmw_1" type="radio" name="cars_1" value="bmw"> <label for="jaguar_1">Jaguar</label> <input id="jaguar_1" type="radio" name="cars_1" value="jaguar"> </fieldset> </form>