1

estoy trabajando con html, php, javascript, postgres. Tengo un formulario que contiene un combo, un boton y un panel. introducir la descripción de la imagen aquí

El funcionamiento del formulario basicamente es: elegir un tipo de animal, oprimir el botón filtrar y en el panel se despliega una tabla con la consulta sql que muestra la cantidad de animales de ese tipo que están en esa localidad.

Tengo el siguiente código:

Código HTML

CODIGO HTML COMPLETO

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="UTF-8">
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/main.css"/>

<?php
session_start();

$user = $_SESSION['varname'];

if (isset($_SESSION['varname'])) {

} 
else {
            echo "Esta pagina es solo para usuarios registrados.<br>";
            header( "Location: auth4.php" );
            exit;
}
//SI SE AGOTO EL TIEMPO DE ESPERA ASIGNADO EN TIME... 
$now = time();
if($now > $_SESSION['expire']) {
            echo "<script> alert('Su tiempo de sessión ha expirado.'); </script>";
            session_destroy();
            header( "Location: login.php" );
}

$host = "localhost";
$db = "animales";
$user = "postgres";
$pw = "admin";
$port = "5432";

$packedString = "host=" . $host . " dbname=" . $db . " user=" . $user . " password=" . $pw . " port=" . $port;


$dbconn = pg_connect("$packedString")or die('Could not connect: ' . pg_last_error());

if($user){}
?>

<head>
<title>Formulario animales</title>
</head>
<body>

    <div id="header">
          <div class="headerBackground"></div>
    </div>

    <div id="content">
        <form type="submit" method="post" role="form-horizontal" id="form-fil">
            <div class="form-group">

                    <div class="col-sm-2" id="tittle">
                        <h1><b>FORMULARIO ANIMALES POR LOCALIDAD </b> <br><b>Clave localidad:  <?php $idLocalidad = $_GET['id_Localidad']; echo $idLocalidad?> </b></h1>
                        </div>

                        <div class="col-sm-3">
                        <label for="sel3">Animales: </label>

                            <select class="form-control" name="selAnimal" id="selAnimal" >
                                <?php

                            $query="select nb_animal from animales;";
                            $result = pg_query($query) or die('Query failed: ' . pg_last_error());
                            $rows = pg_num_rows ($result);
                            $i = pg_num_fields($result);


                                while ($line = pg_fetch_array($result)){
                                        if ($line[0] <> "") {
                                            echo "<option value='$line[0]' >$line[1]</option>";
                                        }
                                        else{
                                            echo"<option >&nbsp;</option>"; 
                                        }
                                }
                            ?>

                            </select>

                        </div>

                        <div class="col-sm-2">
                                <button type="button" class="btn btn-default" name="filtrar" value="Filtrar" id="buttonFiltro" onClick="showTableAnimales();">Filtrar </button>
                        </div>
                <div class="col-sm-2" id="diccionario">
                    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> 
                    <script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>


                    <div class="table-responsive" id="panel-oculto" style="display:none;" class"col-sm-2">
                        <div id="theTableDiccionario"></div>

                </div>

                    <a href="#" id="alternar-panel-oculto" onClick="showTableDic()">Consultar Variable</a><i class="glyphicon glyphicon-info-sign fa-1x" aria-hidden="true" style="color:blue"></i>
            </div>                          

  </form>

<form method="post" class="form-horizontal">
    <div class="panel">

            <div id="theTableAnimal"><b>Filtre el animal del cual desea consultar información</b></div>

    </div>



</body>
<script>
//------------Filtrar animal

function showTableanimal() {
            r=document.getElementById("selAnimal").value;//almacena la respuesta del list (el tipo de rezago)
            var idLocalidad = <?php echo $_GET['id_Localidad']; ?>
        console.log("Animal" + r);

  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 (this.readyState==4 && this.status==200) {
      document.getElementById("theTableAnimales").innerHTML=this.responseText;


    }
  }
  xmlhttp.open("GET","includes/getTablePorApoyar.php?r="+r+"&id_localidad="+idLocalidad,true);
  xmlhttp.send();
}



function showTableDic() {//Muestra informacion respecto a la variable que se elija en el combo
            r=document.getElementById("selAnimal").value;

        console.log("animal" + r);

  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 (this.readyState==4 && this.status==200) {
      document.getElementById("theTableDiccionario").innerHTML=this.responseText;

    }
  }
  xmlhttp.open("POST","includes/getTableDiccionario.php?r="+r,true);
  //console.log("Valor de Ageb #2 = " + q);
  xmlhttp.send();
}
</script>
<script type="text/javascript">

<!--
// jQuery
$(document).ready(function(){ 

    $('#alternar-panel-oculto').toggle( 

        /* 
            Primer click.
            Función que descubre un panel oculto
            y cambia el texto del botón.
        */
        function(e){ 
            $('#panel-oculto').slideDown();
            $(this).text('Consultar otra variable');
            e.preventDefault();
        }, // Separamos las dos funciones con una coma

        /* 
            Segundo click.
            Función que oculta el panel
            y vuelve a cambiar el texto del botón.
        */
        function(e){ 
            $('#panel-oculto').slideUp();
            $(this).text('Consultar Variable');
            e.preventDefault();
        }
     );
 });
</script>
</html>

Código Script

function showTableAnimales() {
            r=document.getElementById("selAnimal").value;//almacena la respuesta del list (el tipo de animal)

        console.log("ANIMALES" + r);

  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 (this.readyState==4 && this.status==200) {
      document.getElementById("theTableApoyados").innerHTML=this.responseText;


    }
  }
  xmlhttp.open("POST","includes/getTableAnimales.php?r="+r,true);

  xmlhttp.send();
}

getTableanimales.php *

AGREGE MI $_GET

*

    <?php
    die(var_dump($_GET));
    $host = "localhost";
    $db = "animales";
    $user = "postgres";
    $pw = "admin";
    $port = "5432";

    $packedString = "host=" . $host . " dbname=" . $db . " user=" . $user . " password=" . $pw . " port=" . $port;


    $dbconn = pg_connect($packedString)or die('Could not connect: ' . pg_last_error());
    session_start();

    $r = intval($_GET['r']);
$idLocalidad=['id_localidad'];
        $query="select count (animal)
                from animales a, localidades l
                where a.c_animal in($r) and id_localidad = '$idLocalidad' //esto es lo que necesito PERO NO SE COMO TRAER AQUÍ MI VARIABLE $ID_LOCALIDAD
                group by a.animal;";

        $result = pg_query($query) or die('Query failed: ' . pg_last_error());
        $rows = pg_num_rows ($result);
        $i = pg_num_fields($result);

        echo "<table class='table table-fixed' border=1> <thead><tr> ";
        for($j=0; $j<$i; $j++){
                $fieldname=pg_field_name($result, $j);
                echo "<th>".strtoupper($fieldname)."</th>"; //columns

        }
        echo "</tr> </thead>"
        ?>



        <?php 
            echo "<tbody>";
            while ($line = pg_fetch_array($result)){
                echo "<tr>"; 
                for($j=0; $j<$i; $j++){
                        if ($line[$j] <> "") {
                                echo "<td>$line[$j]</td>";

                        }
                        else{
                                echo"<td >&nbsp;</td>"; 
                        }
                }   
                echo "</tr>";   
        } 
        echo "</tbody>";
        echo "</table>";

    ?>

Lo que necesito es traer mi variable $idLocalidad y su valor 'idLocalidad' y utilizarlo en mi consulta de la página getTableAnimales pero la verdad no sé como hacerlo, espero puedan ayudarme, gracias

1 respuesta 1

2

Podes imprimir el valor de tu variable de PHP en la función showTableAnimales de la siguiente manera para obtener el valor del id de la localidad y poder usarlo en tu código JavaScript.

function showTableAnimales() 
{
    var id_localidad = <?php echo $_GET['idLocalidad']; ?>
    //resto de tu codigo
}

Saludos!

EDIT

Respuesta al comentario: no suelo usar javascript plano para hacer este tipo de llamados pero deberia funcionar:

function showTableAnimales() 
{
    var id_localidad = <?php echo $_GET['idLocalidad']; ?>
    //resto de tu codigo

    xmlhttp.open("GET","includes/getTableAnimales.php?r="+r+"&idlocalidad="+id_localidad,true);
    xmlhttp.send();
}

Luego en tu php lo podes acceder a el de esta forma:

$_GET['idlocalidad'];

UPDATE

Estuve revisando un poco el código que actualizaste en tu pregunta. y he notado que tiene bastantes errores, no esta bien organizado, por ejemplo pones código que va en el head fuera de él, te faltan cerrar tags, incluyes librerías javascript donde no van, etc.

Creo que deberías empezar por ahí, por entender un poco el funcionamiento de HTML y como y donde agregar librerías.

A modo de ayuda te voy a pegar una parte de tu código (no esta completo), reorganizado un poco para que te sirva de orientación y ya que veo que en ciertos lados utilizas Jquery, te reescribi la funcion showTableAnimales con jquery tambien para que te sirva de orientacion.

suerte en tu lucha amigo, que la fuerza de acompañe.

<?php
session_start();
$user = $_SESSION['varname'];

if (isset($_SESSION['varname'])) {

} 
else {
    echo "Esta pagina es solo para usuarios registrados.<br>";
    header( "Location: auth4.php" );
    exit;
}
//SI SE AGOTO EL TIEMPO DE ESPERA ASIGNADO EN TIME... 
$now = time();
if($now > $_SESSION['expire']) {
    echo "<script> alert('Su tiempo de sessión ha expirado.'); </script>";
    session_destroy();
    header( "Location: login.php" );
}

$host = "localhost";
$db = "animales";
$user = "postgres";
$pw = "admin";
$port = "5432";

$packedString = "host=" . $host . " dbname=" . $db . " user=" . $user . " password=" . $pw . " port=" . $port;

$dbconn = pg_connect("$packedString")or die('Could not connect: ' . pg_last_error());

if($user){}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
    <title>Formulario animales</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta charset="UTF-8">
    <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/main.css"/>
</head>
<body>
    <div id="header">
          <div class="headerBackground"></div>
    </div>
    <div id="content">
        <form type="submit" method="post" role="form-horizontal" id="form-fil">
            <div class="col-sm-2" id="tittle">
                <h1><b>FORMULARIO ANIMALES POR LOCALIDAD </b> <br><b>Clave localidad:  <?php $idLocalidad = $_GET['id_Localidad']; echo $idLocalidad?> </b></h1>
            </div>¿
            <div class="col-sm-3">
                <div class="form-group">
                    <label for="sel3">Animales: </label>
                    <select class="form-control" name="selAnimal" id="selAnimal" >
                        <?php

                            $query="select nb_animal from animales;";
                            $result = pg_query($query) or die('Query failed: ' . pg_last_error());
                            $rows = pg_num_rows ($result);
                            $i = pg_num_fields($result);

                            while ($line = pg_fetch_array($result)){
                                if ($line[0] <> "") {
                                    echo "<option value='$line[0]' >$line[1]</option>";
                                }
                                else{
                                    echo"<option >&nbsp;</option>"; 
                                }
                            }
                        ?>
                    </select>
                </div>
            </div>
            <div class="col-sm-2">
                <button type="button" class="btn btn-default" name="filtrar" value="Filtrar" id="buttonFiltro">Filtrar </button>
            </div>
            <div class="col-sm-2" id="diccionario">
                <div class="table-responsive" id="panel-oculto" style="display:none;" class"col-sm-2">
                    <div id="theTableDiccionario"></div>
                </div>
            </div>
            <a href="#" id="alternar-panel-oculto" onClick="showTableDic()">Consultar Variable</a><i class="glyphicon glyphicon-info-sign fa-1x" aria-hidden="true" style="color:blue"></i>
        </form>
        <form method="post" class="form-horizontal">
            <div class="panel">
                <div id="theTableAnimal"><b>Filtre el animal del cual desea consultar información</b></div>
            </div>
        </form>
    </div>
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> 
    <script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>
        $( document ).ready(function() {
            $('#alternar-panel-oculto').toggle( 

                /* 
                    Primer click.
                    Función que descubre un panel oculto
                    y cambia el texto del botón.
                */
                function(e){ 
                    $('#panel-oculto').slideDown();
                    $(this).text('Consultar otra variable');
                    e.preventDefault();
                }, // Separamos las dos funciones con una coma

                /* 
                    Segundo click.
                    Función que oculta el panel
                    y vuelve a cambiar el texto del botón.
                */
                function(e){ 
                    $('#panel-oculto').slideUp();
                    $(this).text('Consultar Variable');
                    e.preventDefault();
                }
            );

            //este codigo reemplaza la funcion showTableAnimal y el "onClick="showTableAnimales();" que fue removido del boton "filtrar"
            $("#buttonFiltro").click(function(){

               var animal_id = $("#selAnimal").val();
               var localidad_id = <?php echo $_GET['id_Localidad']; ?>

               $.post('includes/getTablePorApoyar.php', { 
                    r: animal_id, 
                    id_localidad : localidad_id
                }, 
                function(returnedData){
                    console.log(returnedData);
                    $("#theTableAnimales").html(returnedData);
                }).fail(function(error){
                    console.log(error);
                });

            });
        });
    </script>
</body>
</html>
13
  • Mi duda es, cómo utilizarlo en mi consulta SQL. Entiendo que tengo que usarla tanbien en mi funcion pero, cómo la invoco en mi codigo PHP de getTableAnimales.php el 13 mar. 2018 a las 19:05
  • Hice los cambios que sugieres y no me envía nada mi consulta el 13 mar. 2018 a las 19:40
  • si haces un die(var_dump($_GET)) en tu php en la primera linea, que te muestra la consola de chrome, cuando seleccionas algo en el combo? el 13 mar. 2018 a las 19:56
  • formularioAnimales.php?idLocalidad=40612-1:341 Uncaught ReferenceError: showTableAnimales is not defined at HTMLButtonElement.onclick (formularioAnimales.php?idLocalidad=40612-1341) onclick @ apoyos2.php?elementoZap=300010001-1:341 el 13 mar. 2018 a las 20:13
  • 1
    Estaba viajando, en que parte tenes definida la función showTableAnimales? es en un archivo .js aparte, en que parte del html lo estas incluyendo? el 13 mar. 2018 a las 21:36

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.