Añadir campos a un form dinámicamente cuando cambie un dropdown list (select)

[Drummer]

Hola a todos:

He estado buscando por el foro, pero no he encontrado mi problema exactamente, lo que encuentro es como llenar un dropdown list dinámicamente, pero eso no es lo que quiero.

Os cuento:

Estoy un poco atascado con mi web, estoy intentando añadir un campo a un form si en un dropdown list (select de php) que hay en la parte de arriba de esa misma página (de ese mismo form) se selecciona una opción concreta.

No soy capaz de hacer que se actualice la página para añadir ese campo que quiero.

He tratado de usar el valor onChange del form para ver si era capaz y no he conseguido nada, voy a pegar la estructura más básica (sin las pruebas que he ido haciendo) para que quede más claro.

Lo que quiero hacer es que si se elije "pendientes" en el dropdown list se añada el campo peso al form, y si no se elije pendientes, que no lo muestre.

Código PHP:

  
 <table width="100%" border="0">
        <tr>
            <td bgcolor="#33CCFF"  width="20%"> <?php include_once("template_lateral_admin.php");?>
            </td>
            <td width="80%">
                <div id="contenidoWeb">
                  <p>&nbsp;</p>
                  <div align="left" style="margin-left:24px">
                    <div align="right" margin-right: 36px></div>
                    <h2>Añadir Nuevo Producto:</h2>
                    <p>&nbsp;</p>
                    
                    <form action="admin_nuevo_producto.php" enctype="multipart/form-data" name="addProductForm" id="addProductForm" method="post">
                    <table width="94%" border="0" cellpadding="3" align="center">
                      <tr>
                        <td> <strong>Categoría: </strong></td>
                        <td align="left"> 
                        <select name="categoria" id="categoria">
                            <option selected value="collares"> collares </option>
                            <option value="pulseras"> pulseras </option>
                            <option value="broches"> broches </option>
                            <option value="pendientes"> pendientes </option>
                            <option value="anillos"> anillos </option>
                        </select>            
                        </td>
                      </tr>
                     
//Más campos aquí, irrelevantes 
 
                          <? 
                            if (mysql_real_escape_string($_POST['categoria']) == "pendientes")
                            {            
                                echo '<tr>     <td><strong> Peso: </strong></td> <td> <input name="pesoPendientes" id="pesoPendientes" type="text" size="10"  /> gramos </td> </tr>';                      
                            }
                        ?>
                      
                      <tr>
                        <td> </td>
                        <td align="right"> <input name="enviar" id="botonEnviar" type="submit" value="Añadir Elemento"  />
                        </td>
                      </tr>
                    </table>  

Después los datos del form los parseo con PHP para meterlos en la BD, pero tampoco tiene que ver con esto.

Muchas gracias ya de antemano, cualquier pista me vendrá bien.

[Marvin]

Tienes que tener claro que una vez que la pagina se carga, no cambia su contenido y se vuelve a enviar.

Para hacer lo que quieres hacer debes usar javascript.

Con jquery (libreria javascript) puedes hacer algo como esto:

Código Javascript:

$("#categoria").change(function(){
  if((this).val() == "pendientes")
    $("#pendientes").show(); //lo muestras
  else
    $("#pendientes").hide(); //lo escondes
});
 

Y en tu formulario puedes hacer un div que contenga todo lo que quieres que se muestre o no:

Código HTML:

<div id="pendientes">
  Esto quiero que se vea cuando se haga click en pendientes...
</div>
 

Saludos!