Alcuni snippets jQuery per i form

Qui di seguito sono riportati alcuni snippets jQuery utili alla soluzione di alcune comuni situazioni, che si presentano durante la scrittura di un form HTML.

Si fa uso della libreria jQuery, includendola all’interno della pagina HTML mediante il tag <script>. 

Disabilitare la pressione del tasto “enter”

$("#form").keypress(function(e) {

  if (e.which == 13) {
    return false;
  }
});

Source: http://www.catswhocode.com/blog/10-awesome-jquery-snippets

Cancellare i dati nel form

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;
  });
};

Source: http://www.jquery4u.com/forms/jquery-function-clear-form-data/#.UI02J2knDF8

Controllare se una checkbox è checked

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

Source: http://jquery-howto.blogspot.be/2008/12/how-to-check-if-checkbox-is-checked.html

Abilitare/Disabilitare elementi del form

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

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

Source: http://css-tricks.com/snippets/jquery/disable-re-enable-inputs/

Abilitare il pulsante di submit se i dati sono inseriti (username)

$('#username').keyup(function() {

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

Source: http://cakebaker.42dh.com/2009/01/13/enabling-submit-button-if-text-entered/

Richiamare l’evento Submit form

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

Source: http://www.jquery4u.com/snippets/jquery-simulate-form-submit/

Prevenire submit multipli dei form

$(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;
    }
  });
});

Source: http://damienalexandre.fr/post/2009/08/02/jQuery-eviter-la-soumission-multiple-d-un-formulaire

Sottolineare le label relative quando si fa focus su un input

$("form :input").focus(function() {

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

Source: http://css-tricks.com/snippets/jquery/highlight-related-label-when-input-in-focus/

Aggiungere dinamicamente elementi in un form

//change event on password1 field to prompt new input

$('#password1').change(function() {
        //dynamically create new input and insert after password1
        $("#password1").append("");
});

Source: http://www.jquery4u.com/forms/jquery-dynamically-add-form-elements/

Popolare automaticamente select box usando Ajax & JSON

$(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 += '' + j[i].optionDisplay + '';
      }
      $("select#ctlPerson").html(options);
    })
  })
})

Source: http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/

Vai all’origine della risorsa

Michele Pierri

Sviluppatore android/web/desktop, blogger, nonchè sostenitore incallito dell’universo Cloud Computing, nel tempo libero amo fare sport e praticare arti marziali.