Previsualizar Form

[Suyta]

Por favor no tengo ni idea de Ajax pero necesito hacer un 'preview' de este form y según me dicen sólo puedo con Ajax. Alguien que me ayude ?
Desde ya muchas gracias

Código PHP:

  <?php 
echo "$head"; 
?> 
<script  src="201a.js" type="text/javascript"></script> 
 
<div id='colorpicker201' class='colorpicker201'></div> 
 
<div align="center"> 
  <center><FORM method='post' action='next.php' method="POST"> 
  <div align="right"> 
  <table width="672" cellspacing="0" style="border-width:0; border-collapse: collapse; " bordercolor="#111111" cellpadding="2" border="1" height="431"> 
<tr> 
  <td height="425" width="346" valign="top" style="border-style: none; border-width: medium" align="right"> 
  <div align="right"> 
  <table width="531" cellspacing="0" style="border-width:0; border-collapse: collapse; " bordercolor="#111111" cellpadding="2" border="1" height="404"> 
<tr> 
  <td colspan="3" width="662" align="left" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top-style: none; border-top-width: medium; border-bottom-style: solid; border-bottom-width: 1" bordercolor="#FFFFFF" height="18" valign="top"> 
  Ad Configuration</td> 
  <td width="396" align="right" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top-style: none; border-top-width: medium; border-bottom-style: solid; border-bottom-width: 1" bordercolor="#FFFFFF" rowspan="12" valign="top" height="398"> 
  &nbsp;</td></tr> 
<tr> 
    <td align="left" width="76" style="border-left:medium none #111111; border-bottom-style: none; border-bottom-width: medium; border-right-style:none; border-right-width:medium" height="29"> 
    <font size="2">Width:</font></td> 
    <td width="122" align='left' style="border-bottom-style: none; border-bottom-width: medium; border-right-style:none; border-right-width:medium; border-left-style:none; border-left-width:medium" height="29"><font size="3" face="Tahoma"> 
    <select name="w" style="width:70;height:18"> 
    <option value="1">120</option> 
    <option value="2">125</option> 
    <option selected="selected" value="3">160</option> 
    <option value="4">180</option> 
    <option value="5">250</option> 
    <option value="6">300</option> 
    <option value="7">468</option> 
    <option value="8">728</option> 
    <option value="9">Custom</option> 
    </select></font></td> 
    <td width="238" align='left' style="border-right:medium none #111111; border-bottom-style: none; border-bottom-width: medium; border-left-style:none; border-left-width:medium; border-top-style:none; border-top-width:medium" height="28">&nbsp;</td> 
  </tr> 
<tr> 
    <td align="left" width="76" style="border-left:medium none #111111; border-bottom-style: none; border-bottom-width: medium; border-right-style:none; border-right-width:medium; border-top-style:none; border-top-width:medium" height="17"> 
    Custom:</td> 
    <td width="122" align='left' style="border-style:none; border-width:medium; " height="17"> 
    <input type="text" name="ancho" size="3" style="width:70;height:18" value=""></td> 
    <td width="238" align='left' style="border-right:medium none #111111; border-bottom-style: none; border-bottom-width: medium; border-left-style:none; border-left-width:medium; border-top-style:none; border-top-width:medium" height="17"></td> 
  </tr> 
<tr> 
    <td align="left" width="76" style="border-left:medium none #111111; border-bottom-style: none; border-bottom-width: medium; border-right-style:none; border-right-width:medium; border-top-style:none; border-top-width:medium" height="17"> 
    # Results:</td> 
    <td width="122" align='left' style="border-style:none; border-width:medium; " height="17"> 
    <input type="text" style="width:20;height:18" name="resulta" size="2" value="1"> 
    (max. 10)</td> 
    <td width="238" align='left' style="border-right:medium none #111111; border-bottom-style: none; border-bottom-width: medium; border-left-style:none; border-left-width:medium; border-top-style:none; border-top-width:medium" height="17"></td> 
  </tr> 
<tr> 
    <td align="left" width="76" style="border-left:medium none #111111; border-top-style: none; border-top-width: medium; border-bottom-style: none; border-bottom-width: medium; border-right-style:none; border-right-width:medium" height="19">&nbsp;</td> 
    <td width="607" align='left' style="border-right:medium none #111111; border-top-style: none; border-top-width: medium; border-bottom-style: none; border-bottom-width: medium; border-left-style:none; border-left-width:medium" colspan="2" height="19"> 
    <hr class="light" color="#FFFFFF" size="1"> 
</td> 
  </tr></center> 
</div> 
<tr> 
    <td align="left" width="76" style="border-left:medium none #111111; border-top-style: none; border-top-width: medium; border-bottom-style: none; border-bottom-width: medium; border-right-style:none; border-right-width:medium" height="27"> 
    Background:</td> 
    <td width="607" align='left' style="border-right:medium none #111111; border-top-style: none; border-top-width: medium; border-bottom-style: none; border-bottom-width: medium; border-left-style:none; border-left-width:medium" colspan="2" height="1"> 
 
       <input type=button style="width:20;height:20" value=... onclick="showColorGrid2('input_field_1','sample_1');" value="..."><input type="text" style="width:77;height:18" name="field1" ID="input_field_1" size="9" value="">&nbsp;<input type="text" style="width:20;height:18" ID="sample_1" size="1" value=""></td> 
  </tr> 
<tr> 
    <td align="left" width="76" style="border-left:medium none #111111; border-top-style: none; border-top-width: medium; border-bottom-style: none; border-bottom-width: medium; border-right-style:none; border-right-width:medium" height="19"> 
    Border:</td> 
    <td width="607" align='left' style="border-right:medium none #111111; border-top-style: none; border-top-width: medium; border-bottom-style: none; border-bottom-width: medium; border-left-style:none; border-left-width:medium" colspan="2" height="19"> 
    <input type=button style="width:20;height:20" value=... onclick="showColorGrid2('input_field_2','sample_2');"><INPUT TYPE="text" style="width:77;height:18" SIZE="9" name="field2" id="input_field_2">&nbsp;<INPUT TYPE="text" SIZE="1" 
style="width:20;height:18" id="sample_2"></td> 
  </tr> 
<tr> 
    <td align="left" width="76" style="border-left:medium none #111111; border-top-style: none; border-top-width: medium; border-bottom-style: none; border-bottom-width: medium; border-right-style:none; border-right-width:medium" height="19"> 
    Title:</td> 
    <td width="607" align='left' style="border-right:medium none #111111; border-top-style: none; border-top-width: medium; border-bottom-style: none; border-bottom-width: medium; border-left-style:none; border-left-width:medium" colspan="2" height="19"> 
       <input type=button style="width:20;height:20" value=... onclick="showColorGrid2('input_field_3','sample_3');"><INPUT TYPE="text" style="width:77;height:18" SIZE="9" name="field3" id="input_field_3">&nbsp;<INPUT TYPE="text" SIZE="1" 
style="width:20;height:18" id="sample_3"></td> 
  </tr> 
<tr> 
    <td align="center" width="683" style="border-bottom:1px none #111111; border-left:medium none #111111; border-top-style: none; border-top-width: medium; border-right-style:none; border-right-width:medium" height="19" colspan="3"> 
    <input name="submit" type="submit" style="width:87;height:20" value="Next"></form>&nbsp;</td> 
  </tr></form> 
<tr> 
    <td align="center" width="658" style="border-bottom:1px none #111111; border-left:medium none #111111; border-top-style: none; border-top-width: medium; border-right-style:none; border-right-width:medium" height="48" colspan="3"> 
&nbsp;</td> 
  </tr></table> 
  </div> 
  </tr></td> 
  <td height="425" width="316" style="border-style: none; border-width: medium" align="center" valign="top"> 
  &nbsp;</td></table> 
  </div> 
 
  <? 
echo $foot; 
exit(); 
?>   

Como pueden ver usa una paleta de colores y los campos se van actualizando... ahí es donde necesito que los campos se reflejen en un preview que cargue en la misma página cuando el usuario elige el nuevo color.
ni idea, los necesito !

[jerkan]

¿Podrías especificar lo del preview de tu form? Es que creo que no es la única opción hacerlo con ajax.

[Suyta]

Hola
Lo que necesito en realidad es eso que le llaman 'live preview'.
Semejante a los comentarios que el usuario deja en los blogs y que ahora podemos ver lo que vamos tipeando a medida que ingresamos el texto.
En mi caso se me hace más difícil porque el form mío lo que hace es definir el formato para avisos publicitarios (largo, ancho, color de fondo, tipografía, etc etc) y necesitan que todo eso se vaya reflejando al mismo tiempo que el usuario ingresa los cambios.
Se entiende ?
Mil gracias.

[daniph]

Hola

Alguien conoce algun ejemplo para previsualizar el envio de un formulario con ajax antes de insertarlo en la base de datos...

Gracias,