Formlarınız için Kullanışlı JQuery Kodları

Form için Enter tuşunu iptal etmek

Form içindeyken enter tuşuna basıldığında formu gönder işlevi yerine gelir. Bu işlemi iptal etmek için aşağıdaki JQuery fonksiyonunu kullanabilirsiniz.

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

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

---

Form bilgilerini temizlemek

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

---

Form elementlerini aktif/pasif hale getirmek.

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

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

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

---

Form içerisinde dinamik olarak form alanı eklemek.

//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' />");
});

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

---

JQuery ile Checkbox’ı kontrol etmek

Belirtilen ID’li form elemanının durumunu kontrol eder. True/false değerini döndürür.

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

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

---

Metin kutusuna bir bilgi girildiğinde Gönder düğmesini aktif hale getirmek.

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

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

---

Metin kutusu alanına girildiğinde etiketi renklendirmek.

$("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/

---

JQuery ile Formu Gönder

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

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

---

 Formun birden fazla gönderimini engellemek

$(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

---

PHP dosyasından birden fazla SelectBox’ı Ajax & Json kullanarak doldurmak.

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

Demo: http://remysharp.com/wp-content/uploads/2007/09/select-chain.php

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