javascript function not displaying correct page

Question

i want to open a specific window according to a drop down selection, the function works fine on the first row of a set of data (pulling it from a database) Since i don't know how many rows are going to come each time the script is running, i've created a loop and writting the function as many times as rows there are coming, having them named different. The thing is that when i change the drop down from the first row, the correct window opens, for instance custom.php?id=1, but when i open the second one, if i select comunicarse from the list, it opens custom.php?id=2 (id=2 is the user's id) Here is the code, and i really hope you can understand me....

 <html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
table {
border-style:ridge;
border-width:1px solid;
border-collapse:collapse;
font-family:sans-serif;
font-size:12px;
width:100%;
}
table thead th, table.excel tbody th {
background:#CCCCCC;
border-style:ridge;
border-width:1;
text-align: center;
vertical-align:bottom;
}
table tbody th {
text-align:center;

}
table tbody td {
vertical-align:bottom;
}
table tbody td {
padding: 0 3px;
border: 1px solid 0000000;
}

table  td {
padding: 0 3px;
border: 1px solid 0000000;

}

</style>


<link rel="stylesheet" href="../css/style.css" type="text/css">



<?php 
include("../../cons/dbinfo.php");

$busco_react = "SELECT * 
FROM  `envios_mercadolibre` 
WHERE status != 'ENTREGADA'  AND status != 'CANCELADA' AND aviso != 1";
$bus1 = mysql_query($busco_react);
while ($b1 = mysql_fetch_array($bus1)){
$para = $b1['id'];

echo '<script language="Javascript" type="text/javascript">
function ReactToChange'.$para.'()
{
if (document.getElementById("DropDownList").value === "custom")
{
    window.open("custom.php?id='.$para.'")
}
else if (document.getElementById("DropDownList").value === "comunicarse")
{
    window.open("comunicarse.php?id='.$para.'")
}
else if (document.getElementById("DropDownList").value === "esperando")
{
    window.open("esperando.php?id='.$para.'")
}
else if (document.getElementById("DropDownList").value === "compro")
{
    window.open("compro.php?id='.$para.'")
}
else {}
}
</script>';

 }
?>
</head>
<body>
<table width = "2200px">
<tr><td colspan="3" align="center"><a href="../index.php">Back to index</a></td></tr>
</table>
<br />
<?php 

echo "<form method='post' action='sendemails.php'>";
echo "<table  border='1' cellpading ='0' cellspacing ='0'>";
echo "<thead><tr><th>MAIL</th><th>Email Address</th><th>Content</th>
<th>Extra 1</th><th>Extra 2</th><th>Full Address</th><th>Full Name</th></tr>
</thead><tbody>";

$bus = "SELECT * FROM  `envios_mercadolibre` WHERE status != 'ENTREGADA'  AND status   !=    'CANCELADA' AND aviso != 1";
$bu = mysql_query($bus) or die("este");
while ($b = mysql_fetch_array($bu)){
$contenido = $b['contenido'];
$extra1 = $b['extra1'];
$extra2 = $b['extra2'];
$usuario_id = $b['usuario_id'];
$para1 = $b['id'];

$datosUsuario = "SELECT nombre, apellido, email from usuarios WHERE id = $usuario_id";
$datosU = mysql_query($datosUsuario) or die("foo");
while ($c = mysql_fetch_array($datosU)){
$nombre = $c['nombre'];
$apellido = $c['apellido'];
$email = $c['email'];


$todoelnombre = $nombre.", ".$apellido;

echo "<tr>
<td><select id='DropDownList' onchange='ReactToChange$para1()'>
<option value='later'>LATER</option>
<option value='comunicarse'>COMUNICARSE CON NOSOTROS</option>
<option value='esperando'>ESPERANDO CALIFICACION EN MERCADO LIBRE</option>
<option value='compro'>NO COMPRO</option>
<option value='custom'>CUSTOM</option>
</select></td>
<td>$email</td>
<td>$contenido</td>
<td>$extra1</td>
<td>$extra2</td>
<td>$todaladire</td>
<td>$todoelnombre
<input type='hidden' name ='datos-$para1' value ='$email' />
</td>
</tr>
";



}

}

echo "<tr><TD colspan ='7' align='center'><input type='submit' /></td></tr></table>";




?>


</div>
</body>
</html>

I'm glad to see that the profanity in your code has been translated to English ;-) — Ja͢ck
– Ja͢ck, Commented May 31, 2012 at 3:36

Jason Evans · Accepted Answer · 2013-01-31 21:00:31Z

It's hard to tell an exact answer without seeing your database structure, but at first I would not create your javascript function inside the while loop, as it will make several functions. On the top of that you really do not need the first SELECT if you use a parameterized javascript function that you call later with the apropriate parameters.

I have modified your code, please take a look at a more effective javascript function and its calling below:

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
table {
border-style:ridge;
border-width:1px solid;
border-collapse:collapse;
font-family:sans-serif;
font-size:12px;
width:100%;
}
table thead th, table.excel tbody th {
background:#CCCCCC;
border-style:ridge;
border-width:1;
text-align: center;
vertical-align:bottom;
}
table tbody th {
text-align:center;

}
table tbody td {
vertical-align:bottom;
}
table tbody td {
padding: 0 3px;
border: 1px solid 0000000;
}

table  td {
padding: 0 3px;
border: 1px solid 0000000;

}

</style>

<link rel="stylesheet" href="../css/style.css" type="text/css">

<script language="Javascript" type="text/javascript">
function ReactToChange(para,ptype)
{
    window.open(ptype+".php?id="+para);
}
</script>

</head>
<body>
<table width = "2200px">
<tr><td colspan="3" align="center"><a href="../index.php">Back to index</a></td></tr>
</table>
<br />
<?php 

echo "<form method='post' action='sendemails.php'>";
echo "<table  border='1' cellpading ='0' cellspacing ='0'>";
echo "<thead><tr><th>MAIL</th><th>Email Address</th><th>Content</th>
<th>Extra 1</th><th>Extra 2</th><th>Full Address</th><th>Full Name</th></tr>
</thead><tbody>";

$bus = "SELECT * FROM  `envios_mercadolibre` WHERE status != 'ENTREGADA'  AND status   !=    'CANCELADA' AND aviso != 1";
$bu = mysql_query($bus) or die("este");
while ($b = mysql_fetch_array($bu)){
$contenido = $b['contenido'];
$extra1 = $b['extra1'];
$extra2 = $b['extra2'];
$usuario_id = $b['usuario_id'];
$para1 = $b['id'];

$datosUsuario = "SELECT nombre, apellido, email from usuarios WHERE id = $usuario_id";
$datosU = mysql_query($datosUsuario) or die("foo");
while ($c = mysql_fetch_array($datosU)){
$nombre = $c['nombre'];
$apellido = $c['apellido'];
$email = $c['email'];


$todoelnombre = $nombre.", ".$apellido;

echo "<tr>
<td><select id='DropDownList' onchange='ReactToChange($para1,this.options[this.selectedIndex].value)'>
<option value='later'>LATER</option>
<option value='comunicarse'>COMUNICARSE CON NOSOTROS</option>
<option value='esperando'>ESPERANDO CALIFICACION EN MERCADO LIBRE</option>
<option value='compro'>NO COMPRO</option>
<option value='custom'>CUSTOM</option>
</select></td>
<td>$email</td>
<td>$contenido</td>
<td>$extra1</td>
<td>$extra2</td>
<td>$todaladire</td>
<td>$todoelnombre
<input type='hidden' name ='datos-$para1' value ='$email' />
</td>
</tr>
";



}

}

echo "<tr><TD colspan ='7' align='center'><input type='submit' /></td></tr></table>";




?>


</div>
</body>
</html>

codingbiz · Accepted Answer · 2012-05-31 03:32:16Z

0

instead of writing multiple function you can write

function ReactToChange(para)
{
  //only call document.getElementById("DropDownList").value once - good programming practice
  var dropdownvalue = document.getElementById("DropDownList").value;
  if (dropdownvalue  === "custom")
  {
     window.open("custom.php?id='"+para+"'")
  }
  else if (dropdownvalue  === "comunicarse")
  {
     window.open("comunicarse.php?id='"+para+"'")
  }
 ...
}


<select id='DropDownList' onchange='ReactToChange($para1)'>
  <option value='later'>LATER</option>
  ...
</select>

Now your code is shorter because you have just one function to handle everything Note that you are passing the "Id" as parameter

If you have thousands of records, you would have generated thousands of functions slowing the page down

answered May 31, 2012 at 3:32

codingbiz

26.4k9 gold badges62 silver badges99 bronze badges

1 Comment

Gustavo Benito Silva Over a year ago

The function works, but again, i still get the same thing, if my first selection is 'comunicarse' then the opening window is comunicarse.php; but when i select custom on the second row the opening page is comunicarse.php instead of custom.php...

Ja͢ck · Accepted Answer · 2012-05-31 03:40:15Z

0

Not sure whether .value will always work properly. Consider the following changes at this point in your code:

function ReactToChange'.$para.'()
{
    var dropdown = document.getElementById('DropDownList'),
    selectedValue = dropdown.options[dropdown.selectedIndex];

    // now make all comparisons against selectedValue
    // ...
    if (selectedValue === 'comunicarse') {
        window.open("comunicarse.php?id='.$para.'")
    }
    // ...
}

answered May 31, 2012 at 3:40

Ja͢ck

174k39 gold badges269 silver badges316 bronze badges

Collectives™ on Stack Overflow

javascript function not displaying correct page

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related