Foros del Web - Ver Mensaje Individual

GatorV · #4 (**permalink**) 18/10/2012, 13:36

Entiendo que seas nuevo, y primero tienes que entender que PHP != HTML, PHP es un lenguaje que corre en el servidor y este genera una salida, es decir el diagrama de proceso es:

- Envio de datos por parte del cliente al servidor
- Servidor detecta que es un script PHP
- Invoca al parser de PHP, ejecuta el script y este devuelve algo
- Servidor envía la respuesta al cliente

Ahora la respuesta que PHP genera puede ser lo que sea, texto, HTML, inclusive contenido binario como imágenes, o vídeos.

Entendiendo eso, puedes ver como para atacar tu problema tienes que hacer dos partes por separado, la primera es tu formulario HTML con Javascript, este debe de ser algo muy independiente a lo del servidor.

Primero estudia y entiende como sirve HTML, como sirven los formularios que es lo que envían al servidor (pares de llaves nombre/valor). Luego ve como se diseñan los selects, con tags <select> cada uno necesita un name que es valor que el servidor recibe.

Ahora integra el Javascript, para accesar a un elemento de tu DOM (HTML) cada select necesita un id, con javascript capturas el evento onChange, y usando AJAX, haces una petición HTTP al servidor (aqui es donde entra PHP), el servidor te contesta con algo, y usas javascript para inyectar la respuesta de forma dinámica al select de regreso.

Lo más común y sencillo creo yo es interactuar con JSON, es decir, el servidor te contesta en un JSON que puedes manipular de forma nativa desde Javascript, puedes usar jQuery creo es lo más sencillo para interactuar, te dejo un ejemplo muy simple para que veas como funciona:

Código HTML:

Ver original<html>
    <head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    </head>
    <body>
        <form>
            <select name="select1" id="select1"></select>
            <input type="button" name="fillOptions" id="fillOptions" value="Obtener Opciones">
        </form>
        
        <script type="text/javascript">
            $(document).ready(function() {
                $('#fillOptions').click(function() { // Aqui usamos el mismo ID del boton
                    $.getJSON('getjson.php', function(json) {
                        $.each(json, function(key, entry) {
                            $('#select1').append($("<option></option>").attr('value', entry.value).text(entry.text)); 
                        });
                    });
                });
            });
        </script>
    </body>
</html>

Ahora eso es puro HTML / Javascript, ahora necesitas un archivo PHP (getjson.php) que es lo que el servidor va a responder (en este caso un archivo JSON) un ejemplo:

Código PHP:

Ver original<?php
 
$options = array(
    array(
        'value' => 'valor1',
        'text' => 'El texto del valor1'
    ),
    array(
        'value' => 'valor2',
        'text' => 'El texto del valor2'
    ),
    array(
        'value' => 'valor3',
        'text' => 'El texto del valor3'
    ),
    array(
        'value' => 'valor4',
        'text' => 'El texto del valor4'
    ),
    array(
        'value' => 'valor5',
        'text' => 'El texto del valor5'
    ),
);
 
header('Content-type: text/json');
echo json_encode($options);

Si ves ese archivo PHP solamente contesta un array JSON que es el que manipulas desde Javascript para llenar el select.

Con este pequeño ejemplo puedes ampliarlo para hacer selects dependientes, solo es enviar el valor del select a tu archivo PHP, y regresar otro JSON con las opciones necesarias para llenar el select que necesites, revisa la documentación de la librería jQuery para envío de valores: $.getJSON.

Saludos.