10 snippets de jQuery para trabajar con formularios

Los formularios, sin duda alguna, son una parte muy importante dentro de un sitio web, pero puede ser un poco complicado gestionarlos. Para ayudarte a la hora de implementar formularios web, he compilado unos cuantos snippets de jQuery que suelo consultar personalmente cuando tengo que codificar alguno. Espero que te guste el listado de snippets y sepas sacarles todo su jugo.

Deshabilitar la tecla “INTRO” en tus formularios

Si quieres evitar que algún visitante envíe accidentalmente tu formulario pulsando la tecla INTRO, puedes utilizar este código para deshabilitar el uso de dicha tecla en tus formularios.

$("#form").keypress(function(e) {
  if (e.which == 13) {
    return false;
  }
});

Limpiar datos del formularios

¿Quieres resetear todos los datos del formulario? Aquí tienes una práctica función que lo lleva a cabo.

function clearForm(form) {
  // iterate over all of the inputs for the form
  // element that was passed in
  $(':input', form).each(function() {
    var type = this.type;
    var tag = this.tagName.toLowerCase(); // normalize case
    // it's ok to reset the value attr of text inputs,
    // password inputs, and textareas
    if (type == 'text' || type == 'password' || tag == 'textarea')
      this.value = "";
    // checkboxes and radios need to have their checked state cleared
    // but should *not* have their 'value' changed
    else if (type == 'checkbox' || type == 'radio')
      this.checked = false;
    // select elements need to have their 'selectedIndex' property set to -1
    // (this works for both single and multiple select elements)
    else if (tag == 'select')
      this.selectedIndex = -1;
  });
};

Saber si un checkbox ha sido marcado

Averigua si una casilla de verificación ha sido marcado o no con este snippet. La función devuelve un true si el checkbox ha sido marcado, un false en caso contrario.

$('#checkBox').attr('checked');

Activar/desactivar elementos de un formulario

¿Quieres que tus formularios sean más usables? Para ello puedes activar o desactivar elementos del formulario como puede ser el botón de Enviar. Por ejemplo, puedes tenerlo deshabilitado por defecto y habilitarlo solo si el formulario ha sido completado satisfactoriamente por el visitante.

$("#submit-button").attr("disabled", true);

Y para rehabilitar todos los inputs que hemos deshabilitado antes...

$("#submit-button").removeAttr("disabled");

Habilitar el botón submit si se ha introducido texto

Aquí tienes una variante del anterior snippet. Esta vez habilitamos el botón de Enviar cuando se ha introducido algo de texto en el campo #username.

$('#username').keyup(function() {
    $('#submit').attr('disabled', !$('#username').val()); 
});

Hacer submit mediante jQuery

Super simple pero, definitivamente, muy pero que muy útil. Aquí tienes cómo hacer submit de un formulario con programación mediante jQuery.

$("#myform").submit();

Evitar que un formulario se envíe muchas veces

El hecho de poder enviar varias veces un mismo formulario es, definitivamente, uno de los problemas más comunes a la hora de desarrollar formularios web. Aquí tienes un trocito de código muy práctico para prevenir múltiples submits de un mismo formulario.

$(document).ready(function() {
  $('form').submit(function() {
    if(typeof jQuery.data(this, "disabledOnSubmit") == 'undefined') {
      jQuery.data(this, "disabledOnSubmit", { submited: true });
      $('input[type=submit], input[type=button]', this).each(function() {
        $(this).attr("disabled", "disabled");
      });
      return true;
    }
    else
    {
      return false;
    }
  });
});

Remarcar el label asociado cuando se hace focus en un campo

Otra manera de hacer que tu formulario sea mucho más sencillo de rellenar para tus visitantes es remarcar el label asociado cuando se hace focus en un campo. Aquí tienes un código de jQuery que te puede ayudar.

$("form :input").focus(function() {
  $("label[for='" + this.id + "']").addClass("labelfocus");
}).blur(function() {
  $("label").removeClass("labelfocus");
});

Añadir elementos a un formulario dinámicamente

Si necesitas añadir elementos al formulario dinámicamente, el snippet de abajo es una manera sencilla de llevarlo a cabo.

//change event on password1 field to prompt new input
$('#password1').change(function() {
        //dynamically create new input and insert after password1
        $("#password1").append("<input type='text' name='password2' id='password2' />");
});

Rellenar campos select utilizando AJAX y JSON

A la hora de realizar un formulario interactivo, es muy util recibir información mediante AJAX y utilizarla para rellenar un elemento select.

El siguiente snippet muestra cómo obtener datso de un archivo php llamado select-php y rellenar un elemento select con la información que devuelve.

$(function(){
  $("select#ctlJob").change(function(){
    $.getJSON("/select.php",{id: $(this).val(), ajax: 'true'}, function(j){
      var options = '';
      for (var i = 0; i < j.length; i++) {
        options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
      }
      $("select#ctlPerson").html(options);
    })
  })
})

Fuente: catswhocode.com