Limpiar formulario

[lucianonicolas]

¡Buenas! Les comento, recién estoy empezando con Javascript y este es mi primer script {también mi primer post}. Ahora bien, funciona perfectamente, pero me parece que es demasiado código para algo tan simple {siendo que a modo de prueba sólo existen dos <input>}, así que quería saber si hay forma de mejorar este código, haciéndolo más conciso y reutilizable, así puedo ir mejorando en la forma de programar...

Desde ya muchas gracias.

Código HTML:

<form>
 <input type="text" name="inputName" id="inputName" value="" />
 <input type="text" name="inputEmail" id="inputEmail" value="" />
</form>
 

Código Javascript:

window.onload = function() {
        
 var valueName = "Nombre";
 var valueEmail = "Email";
            
 var inputName = document.getElementById("inputName");
 var inputEmail = document.getElementById("inputEmail");
            
 inputName.value = valueName;
 inputEmail.value = valueEmail;
            
 function eraseValue() {
  if(this.value == valueName || this.value == valueEmail) {
   this.value = "";
  }
 }
            
 function restoreValue() {
  if(inputName.value == "") {
   this.value = valueName;
  } else if(inputEmail.value == "") {
   this.value = valueEmail;
  }
 }
            
 inputName.onfocus = eraseValue;
 inputEmail.onfocus = eraseValue;
            
 inputName.onblur = restoreValue;
 inputEmail.onblur = restoreValue;
        
}
 

[pablitino]

Hola!!!

Usa una función más general para acceder a través del DOM.

Por ejemplo, yo usaría document.getElementsByName para acceder a todos los objetos del formulario. Creo que IE6 no implementaba correctamente del todo la función getElementsByName... aunque creo que sí que la tiene en cuenta para los elementos de tipo input.

Nota: Echa un vistazo a la forma en la que puedes acceder a los nodos del DOM (pincha aquí).

Deberías poner el mismo atributo name para todos los elementos que quieras borrar o volver a restaurar el valor por defecto (por ejemplo "elemFormulario").

Así pues en la función eraseValue yo haría algo así:

Código Javascript:

var elems = document.getElementsByName("elemFormulario");
 
for (var i=0; i<elems.length; i++)
    elems[i].value = "";
 

Y en la función restoreValue haría algo así:

Código Javascript:

var elems = document.getElementsByName("elemFormulario");
 
for (var i=0; i<elems.length; i++)
   elems[i].value = valoresDefecto[i];
 

Y valoresDefecto sería un array global con los valores por defecto de los elementos del formulario en el mismo orden en que aparecen.

En este caso:

Código Javascript:

valoresDefecto[0] = "Nombre";
valoresDefecto[1] = "Email";
 

Además podría hacer:

Código Javascript:

var elems = document.getElementsByName("elemFormulario");
 
for (var i=0; i<elems.length; i++)
{
     elems[i].onBlur = restoreValue;
     elems[i].onFocus = eraseValue;
}
 

Para asignar las funciones que asignas al final.

Espero que te haya sido de ayuda y haberme explicado bien. Saludos!!

[lucianonicolas]

¡Gracias Pablitino! Así sin dudas es mucho más eficiente. Ya voy a publicar por aquí el código final así todos pueden usarlo.

¡Saludos!

[pablitino]

Un placer ayudar, sí estaría bien que postearas el código por si le sirve a alguien.

Saludos!!