How to set selected option based on radio buttons values with jQuery

Question

I see many times similar questions was asked however my question has a small difference.

I have:

a batch of radio buttons each has 2 values
1 select with options. And based on selected radio values the wanted OPTION will be selected.

I will be very happy and thankful to you guys if you can give me a small help with it.

Right now I am facing the problem how to make jQuery not only react on change function of radio button, but also to get the value in case it already have been loaded chacked...

I would first ignore the field with number, and get back to if after i will figur out with radio...

So for example I want:

if custom_field_7 is female AND custom_field_1 is 0

make SELECT.custom_field_user_role option recommandation3 selected

This is the FIDDLE I am working with

HTML CODE:

<ul>
  <!-- 1 -->
  <li id="wppb-form-element-23">
    <label for="custom_field_7">Your sex:</label>
      <ul class="wppb-radios">
        <li>
          <input value="female" id="female_23" name="custom_field_7" type="radio" required="" checked="">
          <label for="female_23">Female</label>
        </li>
        <li>
          <input value="male" id="male_23" name="custom_field_7" type="radio" required="">
            <label for="male_23">Male</label>
          </li>
      </ul>
   </li>


  <!-- 2 -->
   <li id="wppb-form-element-25">
                <label for="custom_field_9">Yout age:</label>
                <input name="custom_field_9" type="number" id="custom_field_9" value="12" required="">
   </li>
   <!-- 3 -->
   <li id="wppb-form-element-18">
     <label for="custom_field_1">Have you suffered?</label>
       <ul>
         <li>
           <input value="1" id="1_18" name="custom_field_1" type="radio" required="">
           <label for="1_18">Yes</label>
         </li>
         <li>
           <input value="0" id="0_18" name="custom_field_1" type="radio" required="">
           <label for="0_18">No</label>
         </li>
       </ul>
   </li>
<!-- select -->
       <li id="wppb-form-element-27">
                    <label for="custom_field_user_role">Select role:</label>
                    <select name="custom_field_user_role" id="" class="custom_field_user_role " required="">
              <option value="recommandation1" selected="selected">recommandation 1</option>
              <option value="recommandation2">recommandation 2</option>
              <option value="recommandation3">recommandation 3</option>
            </select>
       </li>
    </ul>

jQuery:

$(function(){
        $('input[name = custom_field_7]').change(function() {
                if($('input[name = custom_field_7]').attr('checked') == "checked") { 
            //alert ((this.value));

          if ((this.value) == 'male' ) {
            $('.custom_field_user_role option:eq(2)').attr('selected','selected');
          } else if ((this.value) == 'female' ) {
            $('.custom_field_user_role option:eq(0)').attr('selected','selected');
          }
        }
        });
});


/*
$(function() { 
$('input[name=custom_field_7]').change(function() { 
             var up_sex = (this.value);

          return (up_sex);
          });

    if (!$("input[name='custom_field_7']:checked").val()) {
        $('input[name=custom_field_7]').change(function() { 
             var up_sex = (this.value);

          alert (up_sex);
          });
    } else {
     var up_sex = $("input[name='custom_field_7']:checked").val();

     alert (up_sex);
    }
});
    */

I do not see any jQuery/JS code in your post. What have you tried so far? What Error do you encounter? — Twisty, Mar 30 '20 at 22:21
I believe 1st I must take apart all values from the form and keep them as a group of values (array). and after I can play with statments. — AndrewS, Mar 30 '20 at 22:21

Twisty · Answer 1 · 2020-03-30T22:58:05.873

It looks like you were trying something a bit strangely. I suspect the issue was related to an ambiguous selector: $('input[name = custom_field_7]') This is going to be more than 1 element.

$(function() {
  $("input[name='custom_field_7']").change(function(e) {
    console.log("input[name='custom_field_7'] - Event: " + e.type);
    $("input[name='custom_field_7']").each(function(i, el) {
      if ($(el).is(":checked") && $(el).val() == 'male') {
        $('.custom_field_user_role > option:eq(2)').prop('selected', true);
        console.log(".custom_field_user_role opt(2) selected");
      }
      if ($(el).is(":checked") && $(el).val() == 'female') {
        $('.custom_field_user_role > option:eq(0)').prop('selected', true);
        console.log(".custom_field_user_role opt(0) selected");
      }
    });
  });
});

Working Example: https://jsfiddle.net/Twisty/4ax1j8tq/14/

You might consider using a more specific selector in your if statement: $("input[name='custom_field_7']:checked").val() == 'male'

For options, you can try to use .attr() but .prop() is advised. .prop() vs .attr()

Thanks for your suggestions. one question, what if the form is already loaded with one radio button checked and user don't want to change it? — AndrewS, Mar 31 '20 at 07:18
@AndrewS you would then need to find another callback to bind to or use `setTimeout()` to trigger the check after a specific amount of time. — Twisty, Mar 31 '20 at 15:04

How to set selected option based on radio buttons values with jQuery

1 Answers1