Question

I want to call twoJS functions on onchange event and both functions returns some value. It does not gives me the second function output:

My PHP Code:

  <select name="lstTypex" id="lstTypex" onchange="javascript:showCondition(this.value);showInputType(this.value);">
     In options some values
  </select>
  <span id="condition" style="padding-left:19px;"></span>
  <span id="inputType" style="padding-left:19px;"></span>

My Ajax Code:

// This function is used to submit for condition fields by ajax
function showCondition(colName) {

if (colName.length == 0) { 
    document.getElementById("condition").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("condition").innerHTML=xmlhttp.responseText;
    }
}
xmlhttp.open("GET","ajax/entity_report.php?colName="+colName+"&doAction=showCondition",true);
xmlhttp.send();
}

// This function is used to submit for condition fields by ajax
function showInputType(colName) {

if (colName.length == 0) { 
    document.getElementById("inputType").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("inputType").innerHTML=xmlhttp.responseText;
    }
}
xmlhttp.open("GET","ajax/entity_report.php?colName="+colName+"&doAction=showInputType",true);
xmlhttp.send();
} 

My PHP-Ajax Code:

// include all required files for this screen
include("../include/common.php");
include(MODEL . "entity_report_class.php");

// create class object for class function access
$objCallUsers = new Entity_Report();

// call required class file functions 
$returnStr = "";
$arrTypex = $objCallUsers->fetch_data_type();
$typex = $arrTypex[$_REQUEST['colName']];

switch($_REQUEST['doAction']) {
case 'showCondition': 
    $arrCondition = array();
    if($typex == 'TB' || $typex == 'TA') {
        $arrCondition = array("Equal to","Not equal to","Starts with","Contains any part of word","Contains full word");
    }
    else if($typex == 'DD' || $typex == 'RD') {
        $arrCondition = array("Equal to","Not equal to");
    }

    $returnStr .= '<select name="lstCondition" id="lstCondition">
    <option>--Please Select--</option>';

    foreach ($arrCondition AS $condition) {
        $returnStr .= '<option>' . $condition . '</option>';
    }

    $returnStr .= '</select>';

break;

case 'showInputType': 
$arrCondition = array();
if($typex == 'TB' || $typex == 'TA') {
     $returnStr .= '<input type="text" name="conditionValue" id="conditionValue" value="" />';
}
else if($typex == 'DD' || $typex == 'RD') {
     $returnStr .= ' <select name="conditionValue" id="conditionValue"></select>';
}

break;
}

print($returnStr);

It is giving me output as per the second function call. Both functions returns something.

Answer 1

You are using a global variable xmlhttp and the second function overwrites it. You should make it local to both functions by introducing it with the var keyword.

if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
    var xmlhttp=new XMLHttpRequest();
}
else {// code for IE6, IE5
    var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}