domingo, 29 de septiembre de 2013

Cónoce los valores de la propiedad action con Javascript




Mediante JavaScript, podremos modificar/seleccionar el valor de la propiedad action según las preferencias del usuario.

El ejemplo más típico sería el de un formulario de suscripción a un boletín de novedades, donde el usuario deberá elegir, si desea darse de alta o de baja.


Modificación del valor de la propiedad action

El Script...
<script language="javascript">
function enviar(form)
{
    if ((boletin.alta.checked == true) && (boletin.baja.checked == true))
    { alert("Por favor, marca una sola casilla"); return true; }

    if ((boletin.alta.checked == false) && (boletin.baja.checked == false))
    { alert("Debes indicar si deseas darte de alta o de baja"); return true; }

    if (boletin.alta.checked == true)
    { boletin.action = "ejemplos/alta.asp"; }

    if (boletin.baja.checked == true)
    { boletin.action = "ejemplos/baja.asp"; }

form.submit()
}
</script>

El formulario...
<form name="boletin" method="GET" action="ejemplos/alta.asp" target="_blank">
<b>Suscripción gratuita al boletín de novedades</b><br>
Por favor, introduce tu e-mail:
<input type="text" name="email" size="20"><br>
<input type="checkbox" name="alta" value="ON"> Darme de <b>alta</b> |
<input type="checkbox" name="baja" value="ON"> Darme de baja<br>
<input type="button" onClick="enviar(this.form)" value="Enviar">
</form>

Los resultados...
Por favor, introduce tu e-mail: 
 Darme de alta |  Darme de baja


Otro ejemplo muy utilizado, es enviar el mismo formulario a dos páginas diferentes. Veamos un ejemplo:


Duplicando el valor de la propiedad action

El Script...
<script language="javascript">
function Envio1()
{
datos.action = "ejemplos/pagina1.asp";
datos.submit()
}
function Envio2()
{
datos.action = "ejemplos/pagina2.asp";
datos.submit()
}
</script>
 
El Formulario...
<form method="GET" name="datos" action="ejemplos/pagina1.asp" target="_blank">
Tu nombre: <input type="text" name="nombre"><br>
Edad: <input type="text" name="edad" size="2"><br>
<input type="button" value="Enviar" onClick="Envio1(this.form); Envio2(this.form)">
</form>

Los resultados...
Tu nombre: 
Edad: 


De la misma forma que se puede modificar el valor de la propiedad action, pueden modificarse method target. Modificar el valor de la propiedad method sería un poco ridículo ya que el método por el cual se envían los datos, puede estar perfectamente definido en el formulario. El valor de target puede llegar a ser más útil, si le damos al usuario la posibilidad de decidir si quiere abrir los resultados enviados en nueva ventana, en la misma página o en un marco de la misma.

Fuente: enlace

No hay comentarios:

Publicar un comentario

Entradas populares