jquery-bookmarklet

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/

Yazıyı beğendiyseniz paylaşabilirsiniz.
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •