Cónoce los 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 actionsegú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>

Fuente:enlace

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Sub-propiedades del objeto form y eventos

Otras cuestiones relativas al objeto form: propiedades index y length, y eventos.

2.1 Sub-propiedades del objeto form

El objeto form posee dos sub-propiedades, a parte de las propiedades nombradas en el capítulo anterior. Estas sub-propiedades son:

sub-propiedad	descripción
index	es un array que contiene todos los formularios de una página, donde el primer formulario es identificado con el número 0 y así sucesivamente.
length	contiene el número (cantidad) de formularios que hay en una página.

2.1.1 Sintaxis básica

document.forms[index]

donde index es el número correspondiente al formulario: document.forms[0] indica el primer formulario y

document.forms.length

nos indica la cantidad de formularios que hay en una página.

2.2 Ejemplos de aplicación

LENGTH

---

El código...

Presiona el botón para saber cuantos formularios hay en esta página:

<input type="button" value="Click aquí" onClick="alert('Hay ' + document.forms.length + ' formularios en esta página')">

Los resultados...

Presiona el botón para saber cuantos formularios hay en esta página: 

INDEX

---

El código...

Presiona el botón para saber el nombre del primer formulario:

<input type="button" value="Click aquí" onClick="alert('El nombre del primer formulario es: ' + document.forms[0].name)">

Los resultados...

Presiona el botón para saber el nombre del primer formulario: 

2.3 Los eventos que admite el objeto form

Si bien la mayoría de los eventos JavaScript son aceptados por el objeto form, muchos de ellos pueden crear más problemas que soluciones y si se utilizan, es en casos muy específicos pero no usuales.

En la siguiente lista veremos los más utilizados:

evento	descripción
onSubmit	es el principal evento del objeto form y se produce al enviar el formulario: ya sea mediante el botón submit o mediante una función JavaScript que llame al método submit()
onReset	funciona igual que el evento anterior pero se sucede al restablecer el formulario.

2.3.1 Sintaxis básica

<form name="..." method="..." action="..." target="..." onSubmit="función" onReset="función">

2.4 Ejemplos de aplicación

Aquí veremos un ejemplo en el que se enviará un mensaje de alerta al usuario cuando envía el formulario o cuando lo restablece.

El código...

<form name="formulario" method="post" action="ejemplos/procesar.asp" target="_blank" onSubmit="alert('Se enviará el formulario')" onReset="alert('Se borrarán todos los datos insertados')">

Escribe tu nombre: <input type="text" name="nombre"><br>

<input type="submit" value="Enviar">

<input type="reset" value="Borrar">

</form>

Fuente:enlace

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Objeto form, propiedades y métodos

Conocer el objeto form, sus elementos y propiedades, su procesamiento de datos, su envío y recepción.

El primer paso de este manual consistirá en conocer el objeto form, sus elementos y propiedades y luego iremos viendo algunas de las distintas formas del procesamiento de datos, su envío y recepción, etc.

1.1 El objeto form

ía:

El objeto form es un sub-objeto del objeto document y este a su vez, lo es del objetowindow.

Así como para crear una página en HTML se utilizan las etiquetas <HTML> Y </HTML>, lo mismo sucede con un formulario: el formulario debe estar contenido entre las etiquetas <form> y </form>

En principio la sintaxis básica para referirnos a un formulario ser

window.document.forms.nombre_del_formulario

En la que tranquilamente pueden prescindirse de window y forms ya que el navegador toma al formulario como un objeto en sí mismo. De la misma forma, tambien puede prescindirse de document. Pero esta omisión solo se hará si queremos referirnos a un formulario en particular (por ejemplo a un formulario llamado "datos"). Pero al momento de referirnos a "todos los formularios de una página", solo se podrá prescindir del objeto window.

De todas formas, iremos viendo la aplicación de este tipo de sintaxis con los próximos ejemplos y a medida que avancemos.

1.2 Propiedades principales del objeto form

El objeto form posee las siguientes propiedades:

propiedad	descripción
name	es el nombre único del formulario.
action	es el lugar al cual se envía el formulario para ser procesado. El action define la URL a la cual se envía dicho formulario.
method	método de envío de los datos insertados en un formulario. El method puede ser: GET = envía los datos en una cadena "visible". Conveniente para enviar pocos datos. POST = envía los datos en forma "invisible". Conveniente para enviar una gran cantidad de datos.
target	define la ventana o marco (frame) en la que se mostrarán o procesarán los resultados del formulario. El valor es el mismo que el utilizado en HTML (blank, self, top, nombre_marco, etc..)

1.2.1 Sintaxis básica

<form name="nombre_formulario" action="procesar.asp" method="POST" target="_blank">

.......campos....

</form>

1.3 Métodos del objeto form

El objeto form posee dos métodos:

método	descripción
submit	envía el formulario.
reset	restablece el formulario a los valores por defecto.

1.3.1 Sintaxis básica

<form name="nombre_formulario" action="procesar.asp" method="POST" target="_blank">

.......campos....

<input type="submit" value="enviar formulario">

<input type="reset" value="borrar">

</form>

1.4 Ejemplo de aplicación

Con estos ejemplos veremos la utilización de la propiedad method y de los métodos submit y reset.

Method POST

El código....

<form name="datos" action="ejemplos/procesar.asp" method="POST" target="_blank">

Escribe tu nombre: <input type="text" name="nombre"><br>

<input type="submit" value="enviar formulario"><br>

<input type="reset" value="borrar">

</form>

Fuente:enlace

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información