CODEWITHSUNDEEP
javascripthtmljquery
afi
afi

Reputation: 603

How can i pass the selected value as a parameter in jQuery?

How can i pass parameter in jquery? first the function is runing on load window to check the value of selected item from #id_oc_packages if selected item is found in #id_oc_packages then execute UpdateValue function on load page this logic is working fine. Now i also want to run the function updateValue when i change the value from #id_oc_package change with my self. can anybody tell me how can do that?

I am getting this errorUncaught TypeError: update.val is not a function when i try to change the value from #id_oc_packages

HTML

<select name="oc_packages" class="form-control" required="" id="id_oc_packages">
  <option value="">--------</option>
  <option value="oc" selected="">OC</option>
  <option value="vo">OC/VO</option>
  <option value="st">OC/SOT</option>
  <option value="vost">OC/VO/SOT</option>
  <option value="pkg">OC/PACkAGE</option>
</select>

jQuery.js

 $(document).ready(function () {
        let update = $("#id_oc_packages");
        $(window).on('load', function () {
            UpdateValue(update);
        });

        function UpdateValue(update) {
            if (update) {
                if (update.val() == 'oc') {
                    $('#is_vo').hide();
                    $('#is_sot').hide();
                    $('#is_pkg').hide();
                    $('#is_voxpops').hide();
                    $('#id_oc').attr("rows", 16);
                }
                if (update.val() == 'vo') {
                    $('#is_sot').hide();
                    $('#is_pkg').hide();
                    $('#is_voxpops').hide();
                }
                if (update.val() == 'vost') {
                    $('#is_pkg').hide();
                    $('#is_voxpops').hide();
                }
                if (update.val() == 'pkg') {
                    $('#is_voxpops').hide();
                }
            }
        }
        
        $(update).change(function (e) {
            console.log($(this).val()) // this is working fine!

           // this funtion is not working it getting error!
            UpdateValue(update.val() = $(this).val());
        });
       
    });

Upvotes: 0

Views: 843

Answers (4)

Carsten Massmann
Carsten Massmann

Reputation: 28196

You are making things unnecessarily complicated for yourself. jQuery is all about keeping things simple ...

$(function(){
 $("#id_oc_packages").change(
  function(){
   switch(this.value){
    case 'oc':
     $('#id_oc').attr("rows", 16);
     $('#is_vo').hide();
    case 'vo':
     $('#is_sot').hide();
    case 'vost':
     $('#is_pkg').hide();
    case 'pkg':
     $('#is_voxpops').hide();
   }
 }).change();
})

There is no need to explicitly define the function UpdateValue(). You can define the change event handler directly and trigger it immediately by calling the jQuery method .change() (without an argument).

I am uncertain whether the actions you are performing are sufficient: You are only hiding elements and never show them again...

Upvotes: 0

sikurro
sikurro

Reputation: 375

May be something like this

function UpdateValue(ocValue) {
    $('.packages').hide();
    if (ocValue != "") {                
        switch(ocValue) {
          case 'oc':
            $('#id_oc').show();
            break;
          case 'vo':
            $('#is_vo').show();
            break;
          case 'st':
            $('#is_sot').show();
            break;
          case 'vost':
            $('#is_voxpops').show();
            break;
          case 'pkg':
            $('#is_pkg').show();
            break;
          default:
            $('.packages').show();
        }                
    }
}

$(document).ready(function () {
  $('#id_oc_packages').change(function (e) {
    console.log($(this).val()) // this is working fine!

    // correction
    UpdateValue($(this).val());
  });     
  
  $("#id_oc_packages").change();
});
    
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<select name="oc_packages" class="form-control" required="" id="id_oc_packages">
  <option value="">--------</option>
  <option value="oc" selected>OC</option>
  <option value="vo">OC/VO</option>
  <option value="st">OC/SOT</option>
  <option value="vost">OC/VO/SOT</option>
  <option value="pkg">OC/PACkAGE</option>
  <option value="all">ALL</option>
</select>

<div class="packages" id="id_oc">OC Select</div>
<div class="packages" id="is_vo">OC/VO Select</div>
<div class="packages" id="is_sot">OC/SOT Select</div>
<div class="packages" id="is_voxpops">OC/VO/SOT Select</div>
<div class="packages" id="is_pkg">OC/PACkAGE Select</div>

Demo jsfiffle : https://jsfiddle.net/h0rko8fe/

Upvotes: 1

jiali
jiali

Reputation: 616

Try this:

UpdateValue(update.val( $(this).val() ) );

instead of it:

UpdateValue(update.val() = $(this).val());

According to this ref

You must set value as example:

$(selector).val(value)

Upvotes: 0

user16603402
user16603402

Reputation:

To get an element by id, the # character stands for id, which means you can get the element by getting $("#oc_packages"). jQuery looks for an element with an id of "id_oc_packages", and can't find it - thus not understanding the .val function.

Upvotes: 0

Related Questions