CODEWITHSUNDEEP
javascriptformsjquerydrop-down-menu
Tom
Tom

Reputation: 425

onchange 2 functions on 1 dropdown

I have 2 functions that I would like to call from one dropdown menu. It seems I can only get one to work, but not both. Looking for some help sorting this out. Here is the code, thank you.

Function 1

<script type="text/javascript">
function getCredit(str)
{
if (str=="")
  {
  document.getElementById("credit").innerHTML="";
return;
  }
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("credit").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getcredit.php?id="+str,true);
xmlhttp.send();
}
window.onload = function() {
document.getElementsByName('company')[0].onchange();
}
</script>

And here is function 2.

<script type="text/javascript">
function getTerms(str)
{
if (str=="")
  {
  document.getElementById("terms").innerHTML="";
return;
  }
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("terms").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","customertermsdropdownquery.php?id="+str,true);
xmlhttp.send();
}
window.onload = function() {
document.getElementsByName('company')[0].onchange();

}

</script>

And here is the form dropdown that calls them.

<td><select name="company" onchange="getTerms(this.value);getCredit(this.value);">
<?php while($row = mysql_fetch_array($result)) {
  echo "<option value=\"".$row['company']."\">".$row['company']." (".$row['first']." ".$row['last'].")</option>"; } ?></select></td>

I use div in the form to display php.

<div id="terms"></div>
and
<div id="credit"></div>

I can get either one to work by itself, just not together. Thanks for your help.

Upvotes: 1

Views: 9335

Answers (1)

Mark Meyer
Mark Meyer

Reputation: 3723

Totally understandable that you want to keep them separated. How about create a new function like this.

function getTermsAndCredits(value) {
   getTerms(value);
   getCredits(value);
}

Then in the onchange event call it like this

<td><select name="company" onchange="getTermsAndCredits(this.value);">

Here is a fiddle which should give you a better idea. I don't believe it's necessary to call the onload functions as you have in your code currently.

Upvotes: 2

Related Questions