JS AJAX y PHP

JulioLopezAyvar · #1 (**permalink**) 10/01/2015, 16:22

Estimados mucho gusto.
Los saludo y a la vez les solicito ayuda.
En resumen, podria decir que tengo un form con un combobox, al seleccionar un valor de la lista se ejecuta un JS que escribe un input, el cual se debe llenar. Luego al procesar este form (ya con los datos completos) estos valores no se muestran y tan solo me anuncia: variables no definidas.
Les agradezco de sobremanera la ayuda que me puedan brindar.
Gracias.

JS en cuestion:
<script language='javascript' type='text/javascript'>
function listData(str)
{
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4)
{
if(xmlhttp.status==200)
{
document.getElementById("listData").innerHTML=xmlh ttp.responseText;
}
}
}
xmlhttp.open("GET","listData.php?q="+str,true);
xmlhttp.send();
}
</script>

caricatos · #2 (**permalink**) 10/01/2015, 17:57

Hola:

Parece que no has publicado en el foro correcto, porque no veo nada de php en lo que muestras... sobre la cosa javascript, a partir del poco código que muestras, no sabemos de donde sale la variable str...

Ya que estamos en este foro, podría enseñarnos que hace listData.php.

Saludos

HackID1 · #3 (**permalink**) 10/01/2015, 18:28

Buenas como te comentan aquí solo haces uso de JScript.

Pero según lo que pienso que quieres realizar, es al elegir un checkbox, dependiendo de cual has elegido te muestre una u otra opción a continuación.

Esto lo puedes conseguir con JScript como bien lo has intentado, y posteriormente esas variables las envías por medio de PHP a tu BD o lo que desees.

Este ejemplo es con selects pero te puede venir bien para lo que deseas básicamente es lo mismo.

Código Javascript:

Ver original<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
/**
 * Funcion que se ejecuta al seleccionar una opcion del primer select
 */
function cargarSelect2(valor)
{
    /**
     * Este array contiene los valores sel segundo select
     * Los valores del mismo son:
     *  - hace referencia al value del primer select. Es para saber que valores
     *  mostrar una vez se haya seleccionado una opcion del primer select
     *  - value que se asignara
     *  - testo que se asignara
     */
    var arrayValores=new Array(
        new Array(1,1,"opcion1-1"),
        new Array(1,2,"opcion1-2"),
        new Array(1,3,"opcion1-3"),
        new Array(2,1,"opcion2-1"),
        new Array(3,1,"opcion3-1"),
        new Array(3,2,"opcion3-2"),
        new Array(3,3,"opcion3-3"),
        new Array(3,4,"opcion3-4")
    );
    if(valor==0)
    {
        // desactivamos el segundo select
        document.getElementById("select2").disabled=true;
    }else{
        // eliminamos todos los posibles valores que contenga el select2
        document.getElementById("select2").options.length=0;
        
        // añadimos los nuevos valores al select2
        document.getElementById("select2").options[0]=new Option("Selecciona una opcion", "0");
        for(i=0;i<arrayValores.length;i++)
        {
            // unicamente añadimos las opciones que pertenecen al id seleccionado
            // del primer select
            if(arrayValores[i][0]==valor)
            {
                document.getElementById("select2").options[document.getElementById("select2").options.length]=new Option(arrayValores[i][2], arrayValores[i][1]);
            }
        }
        
        // habilitamos el segundo select
        document.getElementById("select2").disabled=false;
    }
}
 
/**
 * Una vez selecciona una valor del segundo selecte, obtenemos la información
 * de los dos selects y la mostramos
 */
function seleccinado_select2(value)
{
    var v1 = document.getElementById("select1");
    var valor1 = v1.options[v1.selectedIndex].value;
    var text1 = v1.options[v1.selectedIndex].text;
    var v2 = document.getElementById("select2");
    var valor2 = v2.options[v2.selectedIndex].value;
    var text2 = v2.options[v2.selectedIndex].text;
    
    alert("Se ha seleccionado el valor "+valor1+" ("+text1+") del primer select y el valor "+valor2+" ("+text2+") del segundo select");
}
</script>
</head>
 
<body>
</body>
<form>
    <p>
        <select id='select1' onchange='cargarSelect2(this.value);'>
            <option value='0'>Selecciona una opcion</option>
            <option value='1'>opcion 1</option>
            <option value='2'>opcion 2</option>
            <option value='3'>opcion 3</option>
        </select>
    </p>
    
    <p>
        <select id='select2' onchange='seleccinado_select2();' disabled>
            <option value='0'>Selecciona una opcion</option>
        </select>
    </p>
</form>
</html>

Toda esta información hay muchas referencias como esta en Internet seguro encuentras alguna o adaptas esta a lo que deseas conseguir.

Un saludo.

JulioLopezAyvar · #4 (**permalink**) 17/01/2015, 21:29

Muchas gracias por sus respuesta y mil disculpas por la falta de informacion de mi parte. Tratare de ser lo mas detallado posible:
en un formulario 1 tengo un simple combobox que muestra algunos nombres, cuando selecciono alguno de ellos, el JS coje ese valor seleccionado y lo ejecuta en un SELECT, el cual obtendra los datos de ese nombre seleccionado. Luego me mostrara una tabla con varios input en blanco los se deben llenar. una vez terminado ese proceso, se procesa el formulario y ahi es donde radica mi problema, cuando pasamos al formulario 2 se deberia mostrar los valores de esos input, pero tan solo recibo que estos no han sido declarados.
Ojala me puedan ayudar, y ahora les adjunto mas informacion al respecto:

index.php

Código:

<script language='javascript' type='text/javascript'>
            function listData(str)
            {   
                if (window.XMLHttpRequest)
                {
                    xmlhttp=new XMLHttpRequest();
                }
                else
                {
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange=function()
                {
                    if (xmlhttp.readyState==4) 
                    {
                        if(xmlhttp.status==200) 
                        {    
                            document.getElementById("listData").innerHTML=xmlhttp.responseText;
                        }
                    }
                }
                xmlhttp.open("GET","listData.php?q="+str,true);
                xmlhttp.send();
            }
        </script>

Código HTML:

<form action='form2.php' method='post' name='form'/>
<table align='center' cellpadding='0' cellspacing='0' width='400'/>
            <tr>
                <td colspan='2' class='header'>Ingresar Datos</td>
            </tr>
            <tr>
                <td>
                    <label>Nombre Empleado</label>
                </td>
                <td>
                    <?
                        $qr_select =
                        "
                            SELECT 
                                NAME 
                            FROM
                                T_USERS
                            WHERE
                                STATE = '1'
                            ORDER BY
                                NAME
                        ";
                        $rs_select = oci_parse($conn, $qr_select);
                        $rs_execute = oci_execute($rs_select);

                        echo "<select class='select-23x252' id='v_name' name='v_name' onchange='listData(this.value)'>";
                        echo "<option value='' selected='selected'>Seleccione Empleado</option>";
                        while($row = oci_fetch_array($rs_select))
                        {
                            echo "<option value='" . $row['NAME'] . "'>" . $row['NAME'] . "</option>";
                        }
                        echo "</select>";
                    ?>
                </td>
            </tr>
            <tr>
                <td colspan='2'>
                    <div id='listData'></div>
                </td>
            </tr>
        </table>

listData.php

Código HTML:

<table align='center' cellpadding='0' cellspacing='0' width='400'>
    <tr>
        <td>
            <?
                $qr_select =
                "
                    SELECT 
                        NAME,
                        DNI,
                    FROM
                        T_USERS
                    WHERE
                        NAME = '" . $$_GET['q'] . "' AND
                        STATE = '1'
                    ORDER BY 
                        NAME
                ";
                $rs_select = oci_parse($conn, $qr_select);
                oci_execute($rs_select);

                while($row = oci_fetch_array($rs_select))
                {
                    echo 
                    "
                        <table align='center' cellpadding='0' cellspacing='0' visible='false' width='400'>
                            <tr>
                                <td>
                                    <label>Nombre</label>
                                </td>
                                <td>
                                    <input class='textbox-20x235' id='v_name' name='v_name' type='text' />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label>D.N.I.</label>
                                </td>
                                <td>
                                    <input class='textbox-20x235' id='v_dni' name='v_dni' type='text' />
                                </td>
                            </tr>
                    ";
                }
            ?>
        </td>
    </tr>
</table>

formulario 2

Código HTML:

<form action='' method='post' name='form'/>
            <table align='center' cellpadding='0' cellspacing='0' width='400'>
                <tr>
                    <td colspan='2' class='header'>Validar Datos</td>
                </tr>
                <tr>
                    <td>
                        <table align='center' cellpadding='0' cellspacing='0' width='400'>
                            <tr>
                                <td>
                                    <label>Nombre Empleado</label>
                                </td>
                                <td>
                                    <input class='textbox-20x235' id='v_name' name='v_name' type='text' value='<? echo $_POST['v_name']; ?>' />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label>D.N.I.</label>
                                </td>
                                <td>
                                    <input class='textbox-20x235' id='v_dni' name='v_dni' type='text' value='<? echo $_REQUEST['dni']; ?>' />
                                </td>
                            </tr>
                       </table>
</tr>
</table>
</form>