Diferencia entre revisiones de «Usuario:Juanda/javascript/Formularios»

De WikiEducator
Saltar a: navegación, buscar
(→‎Propiedades y eventos de los formularios)
(→‎DOM y acceso al formulario)
 
(18 revisiones intermedias por el mismo usuario no mostrado)
Línea 13: Línea 13:
 
document.forms[0]; //primer formulario de la página web
 
document.forms[0]; //primer formulario de la página web
 
document.forms[0].elements[0]; //elemento 0 del formulario
 
document.forms[0].elements[0]; //elemento 0 del formulario
−
document.forms[0].elements[document.forms[0].elements.length-1]; //último elemento
+
//último elemento:
 +
document.forms[0].elements[document.forms[0].elements.length-1];  
 
</source>
 
</source>
 
*Inconvenientes:
 
*Inconvenientes:
Línea 21: Línea 22:
 
<div class="slide">
 
<div class="slide">
  
−
Mejor mediante el atributo name de los elementos:
+
* Mediante el atributo name de los elementos (mejor opción):
 
<source lang="html4strict">
 
<source lang="html4strict">
 
var formularioPrincipal = document.formulario;
 
var formularioPrincipal = document.formulario;
Línea 29: Línea 30:
 
</form>
 
</form>
 
</source>
 
</source>
−
O mediante el atributo id:
+
* Mediante el atributo id:
 
<source lang="html4strict">
 
<source lang="html4strict">
 
var formularioPrincipal = document.getElementById("formulario");
 
var formularioPrincipal = document.getElementById("formulario");
Línea 39: Línea 40:
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
 +
 
===Propiedades y eventos de los formularios===
 
===Propiedades y eventos de los formularios===
 
*Propiedades:
 
*Propiedades:
Línea 46: Línea 48:
 
:'''name''': se obtiene el valor del atributo name.<br>
 
:'''name''': se obtiene el valor del atributo name.<br>
 
:'''form''': para referirse al formulario de un elemento:<br>
 
:'''form''': para referirse al formulario de un elemento:<br>
−
:document.getElementById("id_del_elemento").form
+
<source lang="javascript">
 +
document.getElementById("id_del_elemento").form
 +
</source>
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
Línea 55: Línea 59:
 
:'''onfocus''' – '''onblur''': cuando el elemento tiene o pierde el foco.
 
:'''onfocus''' – '''onblur''': cuando el elemento tiene o pierde el foco.
  
 +
</div>
 +
<div class="slide">
 +
 +
===Obtención de los datos de un formulario===
 +
====Cuadros de texto====
 +
<source lang="javascript">
 +
<input type="text" id="texto" />
 +
var valor = document.getElementById("texto").value;
 +
<textarea id="parrafo"></textarea>
 +
var valor = document.getElementById("parrafo").value;
 +
</source>
 +
</div>
 +
<div class="slide">
 +
====Radiobutton====
 +
<source lang="javascript">
 +
<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);
 +
}
 +
</source>
 +
</div>
 +
<div class="slide">
 +
 +
====checkbox====
 +
<source lang="javascript">
 +
<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);
 +
</source>
 +
</div>
 +
<div class="slide">
 +
 +
====Listas select====
 +
<source lang="javascript">
 +
<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);
 +
 +
</source>
 +
</div>
 +
<div class="slide">
 +
 +
===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.
 +
<source lang="javascript">
 +
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;
 +
    }
 +
  }
 +
}
 +
</source>
 +
</div>
 +
<div class="slide">
 +
====Evitar envío duplicado del formulario:====
 +
Mediante un botón de tipo &lt;input type="button" /&gt;, ya que el código JavaScript mostrado no funciona correctamente con un botón de tipo &lt;input type="submit" /&gt;
 +
<source lang="javascript">
 +
<form id="formulario" action="#">
 +
....
 +
  <input type="button" value="Enviar" onclick="this.disabled=true;
 +
              this.value=’Enviando...’; this.form.submit()" />
 +
</form>
 +
</source>
 +
</div>
 +
<div class="slide">
 +
 +
====Limitar el número de caracteres de un textarea ====
 +
*En algunos eventos (como onkeypress, onclick y onsubmit) se puede evitar su comportamiento normal si se devuelve el valor false.
 +
*textarea no tiene la propiedad maxlength
 +
<source lang="javascript">
 +
function limita(maximoCaracteres) {
 +
  var elemento = document.getElementById("texto");
 +
  if(elemento.value.length >= maximoCaracteres ) {
 +
    return false;
 +
  }
 +
  else {
 +
    return true;
 +
  }
 +
}
 +
<textarea id="texto" onkeypress="return limita(100);"></textarea>
 +
</source>
 +
</div>
 +
<div class="slide">
 +
====Validar que los elementos de un checkbox estén seleccionados ====
 +
<source lang="javascript">
 +
formulario = document.getElementById("formulario");
 +
for(var i=0; i<formulario.elements.length; i++) {
 +
  var elemento = formulario.elements[i];
 +
  if(elemento.type == "checkbox") {
 +
    if(!elemento.checked) {
 +
      return false;
 +
    }
 +
  }
 +
}
 +
</source>
 +
</div>
 +
 +
<div class="slide">
 +
====Comprobar que se haya seleccionado al menos una opción en un radiobutton ====
 +
<source lang="javascript">
 +
opciones = document.getElementsByName("opciones");
 +
 +
var seleccionado = false;
 +
for(var i=0; i<opciones.length; i++) {
 +
  if(opciones[i].checked) {
 +
    seleccionado = true;
 +
    break;
 +
  }
 +
}
 +
 +
if(!seleccionado) {
 +
  return false;
 +
}
 +
</source>
 
</div>
 
</div>
 
</div>
 
</div>

Última revisión de 08:30 15 oct 2012



Formularios

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
//último elemento:
document.forms[0].elements[document.forms[0].elements.length-1];
  • Inconvenientes:
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>
  • Mediante el atributo id: 
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

  • Propiedades:
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
  • Eventos más habituales:
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>

Limitar el número de caracteres de un textarea

  • En algunos eventos (como onkeypress, onclick y onsubmit) se puede evitar su comportamiento normal si se devuelve el valor false.
  • textarea no tiene la propiedad maxlength 
function limita(maximoCaracteres) {
  var elemento = document.getElementById("texto");
  if(elemento.value.length >= maximoCaracteres ) {
    return false;
  }
  else {
    return true;
  }
}
<textarea id="texto" onkeypress="return limita(100);"></textarea>

Validar que los elementos de un checkbox estén seleccionados

formulario = document.getElementById("formulario");
for(var i=0; i<formulario.elements.length; i++) {
  var elemento = formulario.elements[i];
  if(elemento.type == "checkbox") {
    if(!elemento.checked) {
      return false;
    }
  }
}

Comprobar que se haya seleccionado al menos una opción en un radiobutton

opciones = document.getElementsByName("opciones");
 
var seleccionado = false;
for(var i=0; i<opciones.length; i++) {	
  if(opciones[i].checked) {
    seleccionado = true;
    break;
  }
}
 
if(!seleccionado) {
  return false;
}
Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:Juanda/javascript/Formularios&oldid=9833»