|
|
| Línea 139: |
Línea 139: |
| | <div class="slide"> | | <div class="slide"> |
| | ====Evitar envío duplicado del formulario:==== | | ====Evitar envío duplicado del formulario:==== |
| − | Mediante un botón de tipo <input type="button" />, ya que el código JavaScript mostrado no funciona correctamente con un botón de tipo <source lang="html4strict"><input type="submit" /></source> | + | Mediante un botón de tipo <input type="button" />, ya que el código JavaScript mostrado no funciona correctamente con un botón de tipo <input type="submit" /> |
| | <source lang="javascript"> | | <source lang="javascript"> |
| − | | + | <form id="formulario" action="#"> |
| | + | .... |
| | + | <input type="button" value="Enviar" onclick="this.disabled=true; this.value=’Enviando...’; this.form.submit()" /> |
| | + | </form> |
| | </source> | | </source> |
| | </div> | | </div> |
Revisión de 09:44 3 oct 2012
javaScript
Tutorial para desarrollar en Web mediante JavaScript
DOM y acceso al formulario
- Mediante el array forms del document y su array de elementos:
document.forms[0]; //primer formulario de la página web
document.forms[0].elements[0]; //elemento 0 del formulario
document.forms[0].elements[document.forms[0].elements.length-1]; //último elemento
- Sintaxis a veces poco concisa
- Alteración del orden de los formularios en un entorno tan cambiante como la Web.
- Mediante el atributo name de los elementos (mejor opción):
var formularioPrincipal = document.formulario;
var primerElemento = document.formulario.elemento;
<form name="formulario">
<input type="text" name="elemento" />
</form>
var formularioPrincipal = document.getElementById("formulario");
var primerElemento = document.getElementById("elemento");
<form name="formulario" id="formulario" >
<input type="text" name="elemento" id="elemento" />
</form>
Propiedades y eventos de los formularios
- type: Indica el tipo de elemento del que se trata:
- text, button, checkbox, select-one, select-multiple, textarea
- value: obtiene el texto que se muestra en un botón o en las cajas de texto (text o textarea)...
- name: se obtiene el valor del atributo name.
- form: para referirse al formulario de un elemento:
document.getElementById("id_del_elemento").form
- onclick
- onchange: al cambiar el valor de un elemento y perder el foco
- onfocus – onblur: cuando el elemento tiene o pierde el foco.
Obtención de los datos de un formulario
Cuadros de texto
<input type="text" id="texto" />
var valor = document.getElementById("texto").value;
<textarea id="parrafo"></textarea>
var valor = document.getElementById("parrafo").value;
Radiobutton
<input type="radio" value="si" name="pregunta" id="pregunta_si"/> SI
<input type="radio" value="no" name="pregunta" id="pregunta_no"/> NO
<input type="radio" value="nsnc" name="pregunta" id="pregunta_nsnc"/> NS/NC
var elementos = document.getElementsByName("pregunta");
for(var i=0; i<elementos.length; i++) {
alert(" Elemento: " + elementos[i].value + "\n Seleccionado: " + elementos[i].checked);
}
checkbox
<input type="checkbox" value="condiciones" name="condiciones" id="condiciones"/> He leido y acepto las condiciones
<input type="checkbox" value="privacidad" name="privacidad" id="privacidad"/> He leido la política de privacidad
.....
var elemento = document.getElementById("condiciones");
alert(" Elemento: " + elemento.value + "\n Seleccionado: " + elemento.checked);
elemento = document.getElementById("privacidad");
alert(" Elemento: " + elemento.value + "\n Seleccionado: " + elemento.checked);
Listas select
<select id="opciones" name="opciones">
<option value="1">Primer valor</option>
<option value="2">Segundo valor</option>
<option value="3">Tercer valor</option>
<option value="4">Cuarto valor</option>
</select>
// Obtener la referencia a la lista
var lista = document.getElementById("opciones");
// Obtener el índice de la opción que se ha seleccionado
var indiceSeleccionado = lista.selectedIndex;
// Con el índice y el array "options", obtener la opción seleccionada
var opcionSeleccionada = lista.options[indiceSeleccionado]; //se podría añadir aquí el .text o .value!!!
// Obtener el valor y el texto de la opción seleccionada
var textoSeleccionado = opcionSeleccionada.text;
var valorSeleccionado = opcionSeleccionada.value;
alert("Opción seleccionada: " + textoSeleccionado + "\n Valor de la opción: " + valorSeleccionado);
Otras operaciones
Asignar el foco en el formulario
Comprobamos que haya formularios y asignamos el foco al primer elemento que no sea de tipo hidden.
if(document.forms.length > 0) {
for(var i=0; i < document.forms[0].elements.length; i++) {
var campo = document.forms[0].elements[i];
if(campo.type != "hidden") {
campo.focus();
break;
}
}
}
Evitar envío duplicado del formulario:
Mediante un botón de tipo <input type="button" />, ya que el código JavaScript mostrado no funciona correctamente con un botón de tipo <input type="submit" />
<form id="formulario" action="#">
....
<input type="button" value="Enviar" onclick="this.disabled=true; this.value=’Enviando...’; this.form.submit()" />
</form>
