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 algn visitante enve accidentalmente tu formulario pulsando la tecla INTRO, puedes utilizar este cdigo 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 prctica funcin 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 verificacin ha sido marcado o no con este snippet. La funcin 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 ms usables? Para ello puedes activar o desactivar elementos del formulario como puede ser el botn 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 botn submit si se ha introducido texto

Aqu tienes una variante del anterior snippet. Esta vez habilitamos el botn 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 cmo hacer submit de un formulario con programacin mediante jQuery.

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

Evitar que un formulario se enve muchas veces

El hecho de poder enviar varias veces un mismo formulario es, definitivamente, uno de los problemas ms comunes a la hora de desarrollar formularios web. Aqu tienes un trocito de cdigo muy prctico para prevenir mltiples 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 ms sencillo de rellenar para tus visitantes es remarcar el label asociado cuando se hace focus en un campo. Aqu tienes un cdigo de jQuery que te puede ayudar.

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

Aadir elementos a un formulario dinmicamente

Si necesitas aadir elementos al formulario dinmicamente, 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 informacin mediante AJAX y utilizarla para rellenar un elemento select.

El siguiente snippet muestra cmo obtener datso de un archivo php llamado select-php y rellenar un elemento select con la informacin 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

COMPARTE ESTE ARTÍCULO

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +
¡SÉ EL PRIMERO EN COMENTAR!
Conéctate o Regístrate para dejar tu comentario.