How to pass two parameters in javascript function onChange

Question

I have written a html code for two dropdown boxes. I want to pass these two values as a parameters to a javascript function when we change the second dropdown (onchange).

Here is my code:

function CatName(str1, str2) {

  if (str == "") {
    document.getElementById("album_name").innerHTML = "";
    return;
  } else {
    if (window.XMLHttpRequest) {
      // code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp = new XMLHttpRequest();
    } else {
      // code for IE6, IE5
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        document.getElementById("album_name").innerHTML = xmlhttp.responseText;
      }
    };
    xmlhttp.open("GET", "update.php?q=" + str1 + "&q1=" + str2, true);
    xmlhttp.send();
  }
}

<div class="col-xs-6 col-sm-6 col-md-4 col-md-offset-1">
  <div class="form-group">
    <select class="form-control" name="category_name">
      <option value="" selected>Please Select</option>
      <option value="Birds">Birds</option>
      <option value="Notinlist">Category Not in list</option>
    </select>
  </div>
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-md-offset-1">
  <div class="form-group">
    <select class="form-control" name="album_name" onchange="CatName(this.value)">
      <option value="" selected>Please Select</option>
      <option value="Dove">Dove</option>
      <option value="Parrot">Parrot</option>
      <option value="Notinlist">Category Not in list</option>
    </select>
  </div>
</div>

Just do something like this : CatName(this.value, document.getElementById("id-of-the-first-select-box-here").value); — Nijraj Gelani
– Nijraj Gelani, Commented Feb 27, 2016 at 7:15

Rajesh Dixit · Accepted Answer · 2016-02-27 07:59:52Z

2

Its complicated to passing parameter and receiving them in function. A better option is to write one function and fetch these values using respective id or selector.

Sample Code

function getvalue() {
  var fval = document.getElementById('category_name').value;
  alert(fval);
  var sval = document.getElementById('album_name').value;
  alert(sval);
}

<body>
  <div class="col-xs-6 col-sm-6 col-md-4 col-md-offset-1">
    <div class="form-group">
      <select class="form-control" id="category_name">
        <option value="" selected>Please Select</option>
        <option value="Birds">Birds</option>
        <option value="Notinlist">Category Not in list</option>
      </select>
    </div>
  </div>
  <div class="col-xs-6 col-sm-6 col-md-4 col-md-offset-1">
    <div class="form-group">
      <select class="form-control" id="album_name" onchange="getvalue();">
        <option value="" selected>Please Select</option>
        <option value="Dove">Dove</option>
        <option value="Parrot">Parrot</option>
        <option value="Notinlist">Category Not in list</option>
      </select>
    </div>
  </div>
</body>

edited Feb 27, 2016 at 7:59

Rajesh Dixit

25k5 gold badges52 silver badges86 bronze badges

answered Feb 27, 2016 at 7:27

bhagyashree patil

362 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Rajesh Dixit Over a year ago

Please explain your changes as well.

bhagyashree patil Over a year ago

i can understand what you mean?

Rajesh Dixit Over a year ago

You should explain what changes you have made that OP had missed. Why his code was not working etc. Just code is not a good answer.

bhagyashree patil Over a year ago

ok its complicated to passing parameter and receiving them in function so write one function it automatically fetch value using respective id

Ataur Rahman Munna · Accepted Answer · 2016-02-27 07:41:36Z

1

Giving an id for the first dropdown and get the first dropdown value by that id. here i give an id "categoryName" for the first dropdown.

<div class="col-xs-6 col-sm-6 col-md-4 col-md-offset-1">
<div class="form-group">
         <select class="form-control" name="category_name" id="categoryName" > 
            <option value="" selected>Please Select</option>
            <option value="Birds">Birds</option>
            <option value="Notinlist">Category Not in list</option>
         </select>
</div>
</div>

Getting the first dropdown value by id as a parameter in onchange method.

<div class="col-xs-6 col-sm-6 col-md-4 col-md-offset-1">
<div class="form-group"  >
         <select class="form-control" name="album_name" onchange="CatName(this.value,document.getElementById('categoryName').value)">
            <option value="" selected>Please Select</option>
            <option value="Dove">Dove</option>
                <option value="Parrot">Parrot</option>
            <option value="Notinlist">Category Not in list</option>
         </select>
</div>
</div>

edited Feb 27, 2016 at 7:41

answered Feb 27, 2016 at 7:20

Ataur Rahman Munna

3,9151 gold badge25 silver badges35 bronze badges

1 Comment

Rajesh Dixit Over a year ago

Kindly explain what have you changed as well.

Pedram · Accepted Answer · 2016-02-27 07:20:28Z

0

Check this out:

$('.form-group select').change(function(){
    var val = $(this).val();
 function CatName(val) {
    alert(val);
}
CatName(val);
});

JSFiddle

answered Feb 27, 2016 at 7:20

Pedram

16.7k10 gold badges47 silver badges73 bronze badges

Comments

shamsup · Accepted Answer · 2016-02-27 07:22:09Z

Change the HTML of your second select statement to this:

<select class="form-control" name="album_name" onchange="CatName(this.value, document.querySelector('select[name=category_name]').value)">

First, in order to pass two values, you need to actually pass the two values into your function. In the example you provided you had only passed the value of the 2nd select element.

Second, we need to get the value of the first select element, which we only know the name of. We can use the document.querySelector() function to get the first item that matches a given CSS selector. In this case, our selector would be select[name=category_name]. Then you get the value of that element with the .value property.

document.querySelector('select[name=category_name]').value

Rajesh Dixit · Accepted Answer · 2016-02-27 07:58:04Z

Since you have mentioned jQuery, you can have a onChange handler for second dropdown and on change, fetch first select's value using name or id.

Also, you can use $.get() or $.ajax() instead.

var url = "update.php?q=" + str1 + "&q1=" + str2;
$.get(url, function(response){ // sucess handler })
  .error(function(exception){ // process exception });

$("[name='album_name']").on("change", function CatName() {
  var category = $("[name='category_name']").val();
  var album = $(this).val();
 
  $("#result").html("<pre>" + JSON.stringify({category:category, album:album},0,4));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="col-xs-6 col-sm-6 col-md-4 col-md-offset-1">
  <div class="form-group">
    <select class="form-control" name="category_name">
      <option value="" selected>Please Select</option>
      <option value="Birds">Birds</option>
      <option value="Notinlist">Category Not in list</option>
    </select>
  </div>
</div>
<div class="col-xs-6 col-sm-6 col-md-4 col-md-offset-1">
  <div class="form-group">
    <select class="form-control" name="album_name">
      <option value="" selected>Please Select</option>
      <option value="Dove">Dove</option>
      <option value="Parrot">Parrot</option>
      <option value="Notinlist">Category Not in list</option>
    </select>
  </div>
</div>

<p id="result"></p>

Collectives™ on Stack Overflow

How to pass two parameters in javascript function onChange

5 Answers 5

Sample Code

4 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Sample Code

4 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related