jquery - How to pass two parameters in javascript function onChange

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>

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>

Share Improve this question edited Feb 27, 2016 at 7:34 Rajesh 25k5 gold badges50 silver badges83 bronze badges asked Feb 27, 2016 at 7:11 Vadivel Murugan M 1052 gold badges6 silver badges16 bronze badges

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

Add a ment |

5 Answers 5

Sorted by: Reset to default 2

Its plicated 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>

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>

Check this out:

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

JSFiddle

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

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./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>

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744182258a4562036.html

jquery - How to pass two parameters in javascript function onChange - Stack Overflow

5 Answers 5

Sample Code

发表回复

评论列表（0条）

联系我们

400-800-8888

jquery - How to pass two parameters in javascript function onChange - Stack Overflow

5 Answers 5

Sample Code

相关推荐