HTML/PHP code working in all browsers but Google Chrome and Safari

Question

I have this issue... There are two pages, the first one contains a grid with some information of records from a database table plus a small button (a magnifying glass) to see the rest of the information in the second page...

I tested the functionality in Mozilla Firefox, Internet Explorer and Opera and it worked fine, but when I tested on Google Chrome it didn't work properly... Anyone knows why? And if anyone doesn't know, can anybody think of other way of doing the same thing so it can work on all browsers?

Thanks! Here is a part of the code of my two pages (it belongs to the company, i can't publish the entire code):

"accion_resultado.php"

<div style='margin-right:30px; max-height:223px; overflow-y:auto;'>
    <table id='tabla_salida_lista' class='table table-hover table-bordered'>
        <tr class='success'>
            <td>
                <label style="font-size:9pt; font-family:Verdana, Arial, Helvetica, sans-serif">Fecha Visita</label>
            </td><td>
                <label style="font-size:9pt; font-family:Verdana, Arial, Helvetica, sans-serif">Formulario</label>
            </td><td>
                <label style="font-size:9pt; font-family:Verdana, Arial, Helvetica, sans-serif">Encuestado</label>
            </td><td>
            <label style="font-size:9pt; font-family:Verdana, Arial, Helvetica, sans-serif">Encuestador</label>
            </td>
            <td></td>
        </tr>
        <?php
            $sentencia = pg_query(
                "SELECT 
                    IDFORMULARIO,
                    FORMULARIO,
                    IDENCUESTADO,
                    ENCUESTADO,
                    IDENCUESTADOR,
                    ENCUESTADOR,
                    FECHA,
                    RECEPTOR,
                    OBSERVACIONES,
                    UBICACION,
                    IDVISITA 
                FROM leer_formulario_encuestado('$Formulario','$Encuestador','$Encuestado')
                AS (
                    IDFORMULARIO integer,
                    FORMULARIO varchar(255),
                    IDENCUESTADO integer, 
                    ENCUESTADO varchar(255),
                    IDENCUESTADOR integer, 
                    ENCUESTADOR text,
                    FECHA date, 
                    RECEPTOR varchar(255), 
                    OBSERVACIONES varchar(255),
                    UBICACION varchar(255),
                    IDVISITA integer
                )"
            );

            $num =  pg_num_rows($sentencia);

            $i=0;
            while($i < $num){
                $val1   = pg_fetch_result($sentencia,$i,"IDFORMULARIO");
                $val2   = pg_fetch_result($sentencia,$i,"FORMULARIO");
                $val3   = pg_fetch_result($sentencia,$i,"IDENCUESTADO");
                $val4   = pg_fetch_result($sentencia,$i,"ENCUESTADO");
                $val5   = pg_fetch_result($sentencia,$i,"IDENCUESTADOR");
                $val6   = pg_fetch_result($sentencia,$i,"ENCUESTADOR");
                $val7   = pg_fetch_result($sentencia,$i,"FECHA");
                $val8   = pg_fetch_result($sentencia,$i,"RECEPTOR");
                $val9   = pg_fetch_result($sentencia,$i,"OBSERVACIONES");
                $val10  = pg_fetch_result($sentencia,$i,"UBICACION");
                $val11  = pg_fetch_result($sentencia,$i,"IDVISITA");
        ?>
        <tr>
            <td><label> <?php echo $val7; ?> </label></td>
            <td><label> <?php echo $val2; ?> </label></td>
            <td><label> <?php echo $val4; ?> </label></td>
            <td><label> <?php echo $val6; ?> </label></td>
            <td align="center">
                <form id="Consultar" method="post"  action="resultado.php">
                    <input type="hidden" name="IdFormulario"    value="<?php echo $val1; ?>" /> 
                    <input type="hidden" name="Formulario"      value="<?php echo $val2; ?>" />    
                    <input type="hidden" name="IdEncuestado"    value="<?php echo $val3; ?>" /> 
                    <input type="hidden" name="Encuestado"      value="<?php echo $val4; ?>" />
                    <input type="hidden" name="IdEncuestador"   value="<?php echo $val5; ?>" />
                    <input type="hidden" name="Encuestador"     value="<?php echo $val6; ?>" />
                    <input type="hidden" name="FechaVisita"     value="<?php echo $val7; ?>" />
                    <input type="hidden" name="Receptor"        value="<?php echo $val8; ?>" /> 
                    <input type="hidden" name="Observacion"     value="<?php echo $val9; ?>" />
                    <input type="hidden" name="Ubicacion"       value="<?php echo $val10; ?>" />
                    <input type="hidden" name="IdVisita"        value="<?php echo $val11; ?>" /> 

                    <a onclick="document.getElementById('Consultar').submit()">
                    <input type="image" src='../images/accion_buscar.png' border='0' title='Consultar'/>
                    </a>
                </form>
            </td>
        </tr>
        <?php
                $i++;
            }
        ?>
    </table>
</div>

"resultado.php"

<div style="margin-left:30px">
    <?php
        if (isset($_POST['IdFormulario'])){$IdFormulario =$_POST['IdFormulario'];}
        if (isset($_POST['Formulario'])){$Formulario =$_POST['Formulario'];}
        if (isset($_POST['IdEncuestado'])){$IdEncuestado =$_POST['IdEncuestado'];}
        if (isset($_POST['Encuestado'])){$Encuestado =$_POST['Encuestado'];}
        if (isset($_POST['IdEncuestador'])){$IdEncuestador =$_POST['IdEncuestador'];}
        if (isset($_POST['Encuestador'])){$Encuestador =$_POST['Encuestador'];}
        if (isset($_POST['FechaVisita'])){$FechaVisita =$_POST['FechaVisita'];}
        if (isset($_POST['Receptor'])){$Receptor =$_POST['Receptor'];}
        if (isset($_POST['Observacion'])){$Observacion =$_POST['Observacion'];}
        if (isset($_POST['Ubicacion'])){$Ubicacion =$_POST['Ubicacion'];}
        if (isset($_POST['IdVisita'])){$IdVisita =$_POST['IdVisita'];}
    ?>
    <form id="frmEncabezado">
        <div align="left">
            <table class="tabla">
                <tr><td style="height:50px"></td></tr>
                <tr>
                    <td align="left" ><label>Formulario: </label></td>
                    <td width='5px'></td>
                    <td align="left"><label><?php echo $Formulario;?></label></td>
                    <td width='20px'></td>
                    <td align="left" ><label>Fecha Visita: </label></td>
                    <td width='5px'></td>
                    <td align="left"><?php echo $FechaVisita;?></td>
                    <td width='20px'></td>
                    <td align="left"><label>Encuestado:</label></td>
                    <td width='5px'></td>
                    <td align="left"><?php echo $Encuestado;?></td>
                </tr>
                <tr><td height="10px"></td></tr>
                <tr>
                    <td align="left"><label>Receptor: </label></td>
                    <td width='5px'></td>
                    <td align="left"><?php echo $Receptor;?></td>
                    <td width='20px'></td>
                    <td align="left"><label>Ubicaci&oacute;n:  </label></td>
                    <td width='5px'></td>
                    <td align="left"><?php echo $Ubicacion;?></td>  
                </tr>
            </table>
        </div>
    </form>
    <br />
    <div style='margin-right:30px; max-height:223px; overflow-y:auto;'>
        <table id='tabla_salida_lista' class='table table-hover table-bordered'>
            <tr class='success'>
                <td><label style="font-size:9pt; font-family:Verdana, Arial, Helvetica, sans-serif">Resultados de la Encuesta:</label></td>
                <td><label style="font-size:9pt; font-family:Verdana, Arial, Helvetica, sans-serif">Galer&iacute;a de Im&aacute;genes:</label></td>
            </tr>
        </table>
    </div>
</div>

Note: What happens in Google Chrome and Safari is that when clicking on the image to see the second page (in any of the rows) it always shows the results for the first row... Please, If I'm not being too clear on my explanation, notify me to offer a better one...

Greetings!

Answer 1

Here's your problem:

<a onclick="document.getElementById('Consultar').submit()">

Every row has its own form, but they all have the id Consultar. So, the getElementById() gets the first row. I'm surprised that the other rows would work in any browser.

If the a is always a direct child of the form, you could dispense with the id entirely and just do:

<a onclick="this.parentNode.submit()">