CODEWITHSUNDEEP
javascriptphpjqueryonchange
John D
John D

Reputation: 43

Merging 2 jquery functions that update two seperate DIVs

I wish for a select dropdown box to run two functions simultaneously in order to update two seperate divs on the same page.

here are my functions;

function showFAQ(str) {
  if (str=="") {
    document.getElementById("faqHint").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("faqHint").innerHTML=xmlhttp.responseText;
    }
  }
   var category = "<?php echo $category; ?>";
    var catid = "<?php echo $catid; ?>";
    var subcat = "<?php echo $subcat; ?>";
    var subcat2 = "<?php echo $subcat2; ?>";
    var subcatid= "<?php echo $subcatid; ?>";
    var fileclass= "<?php echo $fileclass; ?>";
  xmlhttp.open("GET","FaqCheck.php?q="+str+ '&catid=' + catid + '&category=' + category + '&subcat=' + subcat + '&subcat2=' + subcat2 + '&subcatid=' + subcatid + '&fileclass=' + fileclass,true);
  xmlhttp.send();
}
function showClass(str) {
  if (str=="") {
    document.getElementById("txtHint").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("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
   var category = "<?php echo $category; ?>";
    var catid = "<?php echo $catid; ?>";
    var subcat = "<?php echo $subcat; ?>";
    var subcat2 = "<?php echo $subcat2; ?>";
    var subcatid= "<?php echo $subcatid; ?>";
    var fileclass= "<?php echo $fileclass; ?>";
  xmlhttp.open("GET","FileCheck.php?q="+str+ '&catid=' + catid + '&category=' + category + '&subcat=' + subcat + '&subcat2=' + subcat2 + '&subcatid=' + subcatid + '&fileclass=' + fileclass,true);
  xmlhttp.send();
}

at the moment I am forced to use two drop down boxes to achieve but I would like it to be neater. the select code is; 1.

<select name="fileclass" onchange="showClass(this.value)" required="">
<option value="">Select</option>
<option value="create">Create</option>
<option value="modify">Modify</option>
<option value="delete">Delete</option>
</select>

2.

<select name="faq_class" onchange="showFAQ(this.value)" required="">
<option value="">Select</option>
<option value="create">Create</option>
<option value="modify">Modify</option>
<option value="delete">Delete</option>
</select>

for information, faq_class and fileclass share the same value (always!)

Thank you for helping a newbie :)

Upvotes: 1

Views: 88

Answers (1)

Dola
Dola

Reputation: 1483

Try to do the following in both functions. I have added the keyword var when initializing xmlhttp variable 

var xmlhttp=new XMLHttpRequest();

This is to make the scope of the variable to be only its containing function. if you initialize the variable without the var keyword, the variable will be attached to window object and will be seen globally.

Edit: Edited the code to show the full code 

function showFAQ(str) {
  if (str=="") {
    document.getElementById("faqHint").innerHTML="";
    return;
  } 
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
   //used the keyword var before initializing xmlhttp variable
   var xmlhttp=new XMLHttpRequest();
  } else { // code for IE6, IE5
   var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById("faqHint").innerHTML=xmlhttp.responseText;
    }
  }
   var category = "<?php echo $category; ?>";
    var catid = "<?php echo $catid; ?>";
    var subcat = "<?php echo $subcat; ?>";
    var subcat2 = "<?php echo $subcat2; ?>";
    var subcatid= "<?php echo $subcatid; ?>";
    var fileclass= "<?php echo $fileclass; ?>";
  xmlhttp.open("GET","FaqCheck.php?q="+str+ '&catid=' + catid + '&category=' + category + '&subcat=' + subcat + '&subcat2=' + subcat2 + '&subcatid=' + subcatid + '&fileclass=' + fileclass,true);
  xmlhttp.send();
}
function showClass(str) {
  if (str=="") {
    document.getElementById("txtHint").innerHTML="";
    return;
  } 
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    //used the keyword var before initializing xmlhttp variable
    var xmlhttp=new XMLHttpRequest();
  } else { // code for IE6, IE5
    var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
   var category = "<?php echo $category; ?>";
    var catid = "<?php echo $catid; ?>";
    var subcat = "<?php echo $subcat; ?>";
    var subcat2 = "<?php echo $subcat2; ?>";
    var subcatid= "<?php echo $subcatid; ?>";
    var fileclass= "<?php echo $fileclass; ?>";
  xmlhttp.open("GET","FileCheck.php?q="+str+ '&catid=' + catid + '&category=' + category + '&subcat=' + subcat + '&subcat2=' + subcat2 + '&subcatid=' + subcatid + '&fileclass=' + fileclass,true);
  xmlhttp.send();
}

And now you can call both functions in the onchange event of just one dropdown list like this:

onchange="showClass(this.value); showFAQ(this.value);"

Upvotes: 2

Related Questions