Home/ Questions/Q 7068681
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T05:21:13+00:00

I have no working knowledge of Java script and am trying to get into

  • 0

I have no working knowledge of Java script and am trying to get into it.

I have a PHP page with a table. The first column of the row has a drop down list. when the onclick event is triggered it populates the other cells in the row based on a php mysql query.

The problem is that my table can consist of up to 75 rows as it is for an order page. I’d prefer not to have the same javascropt code 75 times with a different pointer?

is there an easier way to do this in order to optimize the page and reduce the page complexity? (document.getElementById(“txtHint1″).innerHTML=””;)

Can I use $(this) at all? if so how do I integrate it? otherwise what are my options?

My php page is as below. currently it works with two rows however i need to provision for 75 rows.

<html>
 <head>
 <script type="text/javascript">
 function showUser1(str)
 {
 if (str=="")
   {
   document.getElementById("txtHint1").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("txtHint1").innerHTML=xmlhttp.responseText;
     }
   }
 xmlhttp.open("GET","getdata1.php?q="+str,true);
 xmlhttp.send();
 }

 </script>
 <script type="text/javascript">
 function showUser2(str)
 {
 if (str=="")
   {
   document.getElementById("txtHint2").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("txtHint2").innerHTML=xmlhttp.responseText;
     }
   }
 xmlhttp.open("GET","getdata1.php?q="+str,true);
 xmlhttp.send();
 }

 </script>
 </head>
 <body>
 <?

 $con = mysql_connect('localhost', 'unilekxy_UL', 'Unilever2011');
 if (!$con)
   {
   die('Could not connect: ' . mysql_error());
   }

mysql_select_db("unilekxy_unilever", $con);


$skusql="SELECT packcode,concat(packcode, ' - ' , description) as description from skudata"; 
$resultsku=mysql_query($skusql); 

$optionssku=""; 

while ($row=mysql_fetch_array($resultsku)) { 

    $sku=$row["packcode"]; 
    $description=$row["description"]; 
    $optionssku.="<OPTION VALUE=\"$sku\">".$description; 
} 

 ?>

<table border=1>
<tr>
    <td width=393>Product</td>
    <td width=200>Category</td>
    <td width=150>Selling Unit</td>
    <td width=150>Grouping</td>
    <td width=150>Full Case QTY</td>
</tr>
</table>

<table>
<tr>
    <td>
        <select name="users" onchange="showUser1(this.value)" size=1>
        <OPTION VALUE=0>
        <?=$optionssku?> 
        </SELECT> 
    </td>
    <td>
        <div id="txtHint1"><b>SKU Details will be seen here</b></div>
    </td>
</tr>

<tr>
    <td>
        <select name="users" onchange="showUser2(this.value)" size=1>
        <OPTION VALUE=0>
        <?=$optionssku?> 
        </SELECT> 
    </td>
    <td>
        <div id="txtHint2"><b>SKU Details will be seen here</b></div>
    </td>
</tr>

</table>


</body>
 </html>

the php page that gets called to execute the mysql is

<?php
 $q=$_GET["q"];

$con = mysql_connect('localhost', 'dbuser', 'dbpass');
 if (!$con)
   {
   die('Could not connect: ' . mysql_error());
   }

mysql_select_db("unilekxy_unilever", $con);

$sql="SELECT Category, SellingUnits,Grouping,CasesPerPallet,ShrinksPerPallet  FROM skudata WHERE packcode = '".$q."'";

$result = mysql_query($sql);



while($row = mysql_fetch_array($result))
   {
   echo "<table border=1><tr>";
   echo "<td width=200>".$row['Category']."</td>";
   echo "<td width=150>".$row['SellingUnits']."</td>";
   echo "<td width=150>".$row['Grouping']."</td><td width=150>";
   if($row['SellingUnits']=="CS"){echo $row['CasesPerPallet'];} elseif($row['SellingUnits']=="SHR") {echo $row['ShrinksPerPallet'];}
   echo "</td></tr></table>";
   }

mysql_close($con);
 ?>

Thanks in advane for the help,
Ryan

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You’ve touched on one of the most valuable principles of programming: Don’t Repeat Yourself (DRY). Programming is all about seeking the most efficient way to do something. Anyway, here’s the simplest way to rewrite your javascript function to be more generic:

    <script type="text/javascript">
  function showUser(userNumber, str)
  {
    if (str=="")
    {
      document.getElementById("txtHint" + userNumber).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" + userNumber).innerHTML=xmlhttp.responseText;
      }
    }
    xmlhttp.open("GET","getdata1.php?q="+str,true);
    xmlhttp.send();
  }
</script>

    Now in each of your table rows, your select element becomes:

    <select name="users" onchange="showUser(1, this.value)" size=1>

    Replacing ‘1’ with the row number.

    Using jQuery to grab the closest txtHint element would be an even better way to structure your code, but that’s a little beyond the scope of the question.

    • 0