Disable “enter” key in your forms
If you want to prevent visitors to accidentally submit your form by hitting the “enter” key, you can use this snippet to disable the use of the “enter” key in your forms.
$("#form").keypress(function(e) {
if (e.which == 13) {
return false;
}
});
Source: http://www.catswhocode.com/blog/10-awesome-jquery-snippets
Clear form data
Need to clear all form data? Here’s a handy function to do it.
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
Find is a checkbox is checked
Find out if a single checkbox is checked or not. The function will returns true
or false
:
$('#checkBox').attr('checked');
Source: http://jquery-howto.blogspot.be/2008/12/how-to-check-if-checkbox-is-checked.html
Enable/Disable form elements
Want to make your forms more user-friendly? Then you can enable or disable form elements such as the submit button. For example, you can have it disabled by default and enable it only if the form has been properly filled by the visitor.
$("#submit-button").attr("disabled", true);
And to re-enable a previously disabled input:
$("#submit-button").removeAttr("disabled");
Source: http://css-tricks.com/snippets/jquery/disable-re-enable-inputs/
Enable submit button if text entered
Here’s a variant of the above snippet, this time allowing you to automatically enable the submit button if some text is entered in a #username
input field.
$('#username').keyup(function() {
$('#submit').attr('disabled', !$('#username').val());
});
Source: http://cakebaker.42dh.com/2009/01/13/enabling-submit-button-if-text-entered/
Submit form programmatically
Super simple but definitely useful: Here’s how to submit a form programmatically using jQuery.
$("#myform").submit();
Source: http://www.jquery4u.com/snippets/jquery-simulate-form-submit/
Prevent multiple submit of your form
Multiple submissions of the same form is definitely one of the most common problem seen when working with web forms. Here’s a super useful piece of code to prevent multiple submissions of the same 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
Highlight related label when input in focus
Another way to make your form easier to fill for your visitors: Highlight related label when input in focus. Here’s some jQuery goodness to help.
$("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/
Dynamically add form elements
If you need to dynamically add form elements, the snippet below is a simple way to do it.
//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/
Auto-populating select boxes using Ajax & JSON
When building an interactive form, it is very useful to be able to get some data with ajax and use it to populate a select element.
The following snippet shows how to get data from a php file named select.php
(line 3) and populate a select element with it.
$(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);
})
})
})
Source: http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/
via CatsWhoCode.com http://www.catswhocode.com/blog/awesome-jquery-snippets-to-work-with-forms
Comentaris
Publica un comentari a l'entrada