Valores de la propiedad action

Mediante JavaScript, podremos modificar y seleccionar el valor de la propiedad action.

3.1 Ejemplos de aplicación


Vimos en la introducción de este manual, para que sirve la propiedad action. Ahora, veremos lo que se puede hacer con la misma mediante 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 y 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.

Autor

Eugenia Bahit

Analista Programadora LAMP y Scrum Coach

Compartir

Comentarios

alfonso

24/8/2004
Lo del action a dos páginas no funciona. He perdido dos horas intentándolo.

Julian Lasso

13/7/2005
Hola atodos una corrección que dejo ahora a mas de uno en jake con el FireFox, Mozilla y que ahora funciona en IE

antes era asi:
document.formulario.campo.value = 12;
ahora es asi:
document.formulario['campo'].value = 12;

Espero que les sirva mi comentario!!!

juan

04/12/2005
Solo funciona en IE y Opera NO FUNCIONA EN FF NI EN NP

POR QUE?

Lucy

06/6/2007
Excelente estos scripts...Se echa en falta la siguiente indicación...¿Dónde se inserta el script?...¿En el Head? o ¿En el Body?.
Sería interesante que lo dijeran

junko

17/6/2007
el método es interesante pero es cierto que en firefox no funciona correctamente.

es necesario pasarle a la función el formulario de la siguiente forma:

<input type="button" onClick="continuar(document.formulario)" value="Continuar">


un saludo

julio

19/4/2009
aprender mas sobre las propiedades de los formularios
Espero y me pueda resolver todas mis dudas gracias

emmanuel

18/8/2009
no funciona con firefox 3.5
el codigo en javascript no funciona correctamente sobre el navegador firefox 3.5

Matias

06/6/2011
Error en ejemplo
Euge, como estas?
Estaba probando el ejemplo donde se cambia la propiedad ACTION del formulario y no me funcionaba. La propiedad cambia tal como decis pero el formulario no se envia.
En tu ejemplo vos pusiste al final de la funcion Enviar lo siguiente:
form.submit()
Pero el nombre de tu formulario es "boletin".
Si en lugar de form.submit() pones boletin.submit() ahi si el formulario es enviado al escript que se indique en boletin.action="... que en tu ejemplo es "ejemplos/alta.asp"; o "ejemplos/baja.asp";
Aprobecho para agradecerte haber escrito este manual porque me sirvio de mucho.
Saludos