Second onchange event

[budimir]

Hi,

 

I have a radio button which, when clicked, is opening select. I would like to store the value of a radio and select into two separate cookies. This is my code I'm using, but I can't get second on change event to fire and get the value of select. I do get value of radio and store in cookie, but when trying to get value from select I get null. Can you, please help me and tell me what I'm doing wrong?

 

Html code:

<div class="row">
   <div class="col-md-6">
     <div class="radio clip-radio radio-primary">
          <input type="radio" id="radio3" name="vertical" value="Pricelist" />
            <label for="radio3">
            Pricelist
            </label>
     </div>
     <div id="Pricelist" class="desc">
         <div class="form-group">
           <select class="cs-select cs-skin-elastic" name="pricelist" id="pricelist_select">
              <option value="" disabled selected>Select pricelist</option>
              <option value="1">1</option>
              <option value="2">2</option>
           </select>
     </div>
  </div>

jQuery

//Displaying select box when type radio button is clicked
            $(document).ready(function() {
                $("input[name=vertical]").on( "change", function() {
                     var test = $(this).val();
                     $(".desc").hide();
                     $("#"+test).show();
                     $("#pricelist_select").val();
                     $('#pricelist_select').trigger("change");
                    alert($("#pricelist_select").find(":selected").val());
                    $.cookie('pricelist_select', $("#pricelist_select").val());
                } );

            });

CSS

.desc { display: none; }

[Psycho]

There are several problems in that code that make no sense. You've only implemented an onChange event on the radio button. When selected it:

 

1. Hides the "desc" element

2. Dynamically shows the select list based on the value passed frm the clicked radio button

3. Makes a call for the value of the select list (using hard-coded id) - but does nothing with the value, so that line has no purpose

4. Triggers an onChange event for the select list (using hard-coded id).

5. Does an alert of the selected value (again using a hard-coded id).

6. Sets a cookie using the selected value of the select list  (again using a hard-coded id).

 

Here are the problems:

1. The function starts by using the value of the passed radio button to dynamically show the select option, but then all the remaining code has hard-coded identifiers. The code should be dynamic or hard-coded - not both.

2. Not sure why you make a call for the value of the select list, but don't do anything with it. That line has no functional purpose

3. There is no onChange function defined for the select list. So, the fact that you trigger an onchange for it has no purpose.

4. Since the above is executed when the radio button is clicked, the initial value of the select list will be the default value which, in this case, is an empty string for a disabled option. This is what is getting saved to the cookie.

 

Create a separate onchange event for the select list and use THAT to save the value to a cookie.

[budimir]

I have tried that, but I can't get the value of select box.

[Jacques1]

We need to see your code. Since you obviously struggle with the basics of JavaScript, there may still be plenty of other technical issues which break the whole thing.

[Psycho]

Here's some revised code. Note that I created a new onchange process for the select list. The onchange is hard-coded to that specific select list, but the code is written to be adaptable to other select lists (which I assume you might have for different radio button options). If that is the case, change the identifier for the onchange event to apply to all of the select lists that you may want the same functionality for.

 

Also, I made the first option in the select field enabled as it may have been the cause of part of your problem depending on the browser. I would either enable the "instruction" option or remove it. It was working for me when disabled (it would default to 1 when first clicking the radio button option), but I could see where there could be a browser specific issue.

 

 

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 
<script>
 
//Displaying select box when type radio button is clicked
$(document).ready(function() {
$("input[name=vertical]").on( "change", function() {
var fieldGroupName = $(this).val();
var fieldGroupObj = $("#"+fieldGroupName);
var selectListObj = $("#"+fieldGroupName+"_select");
fieldGroupObj.show();
$('#Pricelist_select').trigger("change");
} );
 
$("select[name=Pricelist]").on( "change", function() {
   var selectID = $(this).attr('id');
var selectValue = $(this).val();
if(selectValue != "")
{
$.cookie(selectID, selectValue);
}
} );
 
});
 
</script>
 
<style>
 
#Pricelist { display: none; }
 
</style>
 
</head>
<body>
<div class="row">
  <div class="col-md-6">
    <div class="radio clip-radio radio-primary">
        <input type="radio" id="radio3" name="vertical" value="Pricelist" />
        <label for="radio3">Pricelist</label>
    </div>
    <div id="Pricelist" class="desc">
      <div class="form-group">
        <select class="cs-select cs-skin-elastic" name="Pricelist" id="Pricelist_select">
          <option value="" select="selected">Select pricelist</option>
          <option value="1">1</option>
          <option value="2">2</option>
        </select>
      </div>
    </div>
 
  </div>
</div>
 
</body>
</html>

[budimir]

Thank you Psycho! You're code helped me to find my problem and get the value.