Home/ Questions/Q 8183749
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T01:15:36+00:00

I have a javascript that I downloaded off the net. This works great. My

  • 0

I have a javascript that I downloaded off the net. This works great. My problem is I now require to use this same script but on three instances on the page? how can I duplicate or edit this javascript code in order to acheive this.

To give you a background, I have a dropdown list, that onchange calls the below function to populate a table with mysql data without page refresh. the script shows info from another page, getpersonsformedical.php.

I now have two other pages that I want to show on the same page using the same javascript. namely
getjobsformedical.php and getrisksformedical.php.

Any help would be appreciated. (apologies my javascript is not that great).

Can I just duplicate the code in another script tag? but then how do I call multiple onchange events for a single tag onclick. All three of these pages must be called from the single onclick.

I understand that there are other ways of doing this but if we could stivck to this methodology it would be appreciated.

To clarify, I need one onchage event to display three seperate php pages(with mysql data) in three seperate .

UPDATE WITH ANSWER

Thanks to dystroy, complete working script is:

<script> 
function showUser(userNumber, str, target, page) {  
  if (str=="")  {  
       document.getElementById(target + userNumber).innerHTML=''; 
     return;  
    }    
    var xmlhttp=new XMLHttpRequest(); 
    xmlhttp.onreadystatechange=function()  {  
      if (xmlhttp.readyState==4 && xmlhttp.status==200)   {  
        document.getElementById(target).innerHTML = xmlhttp.responseText;  
      }  
    }  
    xmlhttp.open("GET",page+"?q="+str,true);  
    xmlhttp.send();  
  }  

    function showThreeSections(userNumber, str) { 
    showUser(userNumber, str, 'a', 'getpersonsformedical.php'); 
    showUser(userNumber, str, 'b', 'getjobsformedical.php'); 
    showUser(userNumber, str, 'c', 'getrisksformedical.php'); 
    }
</script>

outputted to divs:

<div align="left" id="a"><font color=gray>Person Assignment will be shown here</font></div>
<div align="left" id="b"><font color=gray>Person Jobs will be shown here</font></div>
<div align="left" id="c"><font color=gray>Person Risks will be shown here</font></div>

Thanks and Regards,
Ryan

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You should have in the HEAD element of your HTML page the script, only once, but taking another argument : the name of the page.

    And a second function could call the first one three times with the different arguments.

    Something like this :

    <HEAD>
 ... other things

<script>
function showUser(userNumber, str, page) { 
  if (str=="")  { 
      return; 
    }   
    var xmlhttp=new XMLHttpRequest(); 
    xmlhttp.onreadystatechange=function()  { 
      if (xmlhttp.readyState==4 && xmlhttp.status==200)   { 
        document.getElementById("txtHint" + userNumber).innerHTML += xmlhttp.responseText; 
      } 
    } 
    xmlhttp.open("GET",page+"?q="+str,true); 
    xmlhttp.send(); 
  } 

  function showThreeSections(userNumber, str) {
      document.getElementById("txtHint" + userNumber).innerHTML='';
      showUser(userNumber, str, 'getpersonsformedical.php');
      showUser(userNumber, str, 'page2.php');
      showUser(userNumber, str, 'page3.php');
  }
</script>

    Note that the big function adds to innerHTML instead of cleaning it.

    And then you can have this select :

    <SELECT NAME=medcondition3 id=medcondition3 onchange="showThreeSections(1, this.value)">

    But this solution is probably bad : you should probably have different target divs to fill instead of just one. Hard to say without redesigning (or at least studying) the whole page.

    EDIT :

    If you want to target different divs, you should :

    1) have three divs. For example

    <div id=a1></div>
<div id=b1></div>
<div id=c1></div>

    2) modify the code for example like this :

    <script>
function showUser(userNumber, str, target, page) { 
  if (str=="")  { 
       document.getElementById(target + userNumber).innerHTML='';
     return; 
    }   
    var xmlhttp=new XMLHttpRequest(); 
    xmlhttp.onreadystatechange=function()  { 
      if (xmlhttp.readyState==4 && xmlhttp.status==200)   { 
        document.getElementById(target + userNumber).innerHTML = xmlhttp.responseText; 
      } 
    } 
    xmlhttp.open("GET",page+"?q="+str,true); 
    xmlhttp.send(); 
  } 

  function showThreeSections(userNumber, str) {
      showUser(userNumber, str, 'a', 'getpersonsformedical.php');
      showUser(userNumber, str, 'b', 'page2.php');
      showUser(userNumber, str, 'c', 'page3.php');
  }
</script>
    • 0