$(function(){
//代码片段1: 在表单中禁用“回车键”(disabled the enter key)
$("#form").keypress(function(event) {
/* Act on the event */
if(event.which == 13){
return false;
}
});
//代码片段2: 清除所有的表单数据(clear all of the form data)
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;
});
};
$("#clearForm").click(function(){
clearForm($("#form"));
});
//代码片段3: 将表单中的按钮禁用 (disabled button)
//禁用方法,例如提交之后ajax请求中，按钮禁用
$("#somebutton").attr("disabled", true);
//启动按钮
$("#submit-button").removeAttr("disabled");
//代码片段4: 输入内容后启用递交按钮(enable button after finish some action)
$('#gbsearch').attr('disabled', 'disabled');
$('#search').keyup(function() {
$('#gbsearch').attr('disabled', !$('#search').val());
});
//代码片段5: 禁止多次递交表单 (forbidden many times of repeat submit)
$('#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;
}
});
//代码片段6: 高亮显示目前聚焦的输入框标示 (highlight the input box when you focus )
$("form :input").focus(function() {
$("label[for='" + this.id + "']").addClass("labelfocus");
}).blur(function() {
$("label").removeClass("labelfocus");
});
//代码片段7: 动态方式添加表单元素 (append form element dynamically)
//change event on password1 field to prompt new input
$('#text').change(function() {
//dynamically create new input and insert after password1
$("#form").append("<input type='text' name='password2' id='password2'>");
});
//代码片段8: 自动将数据导入selectbox中 （add option data dynamically）
$("select#countries").change(function(){
$.getJSON("http://www.gbin1.com/gb/networks/uploads/b7819361-e872-4502-8697-9d727ffb603a/data.json", function(j){
var options = '', cities = new Array();
cities = j.cities;
for (var i = 0; i < cities.length; i++) {
options += '<option value="' + cities[i] + '">' + cities[i] + '</option>';
}
$("select#cities").html(options);
});
});
//代码片段9: 判断一个复选框是否被选中 (check the checkbox status)
$('#checkBox').attr('checked');
//代码片段10: 使用代码来递交表单 (submit the form as you need)
$("#myform").submit();
});
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.