10個超棒jQuery表單操作程式碼片段
[url]http://www.qianduan.net/10-awesome-jquery-form-action-code-fragment-not-to-be-missed.html[/url]
jQuery絕對是一個偉大的開源javascript類庫,是幫助我們快速和高效開發前端應用的利器。可能大家在日常的開發過程中常常會處理表單相關的javascript,在今天這篇程式碼片段分享文章中,這裡收集了10個超棒超實用的jQuery表單處理程式碼,希望能夠在大家的開發過程中幫助大家更好更快的處理表單相關問題,希望大家喜歡!如果你也有相關的程式碼,請大家積極分享!
程式碼片段1: 在表單中禁用“Enter鍵”
大家可能在表單的操作中需要防止使用者意外的提交表單,那麼下面這段程式碼肯定非常有幫助:
程式碼片段2: 清除所有的表單資料
可能針對不同的表單形式,你需要呼叫不同型別的清楚方法,不過使用下面這個現成方法,絕對能讓你省不少功夫。
程式碼片段3: 將表單中的按鈕禁用
下面的程式碼對於ajax操作非常有用,你可以有效的避免使用者多次提交資料,個人也經常使用:
禁用按鈕:
啟動按鈕:
可能大家往往會使用.attr(‘disabled’,false);,不過這是不正確的呼叫。
程式碼片段4: 輸入內容後啟用遞交按鈕
這個程式碼和上面類似,都屬於幫助使用者控制表單遞交按鈕。使用這段程式碼後,遞交按鈕只有在使用者輸入指定內容後才可以啟動。
程式碼片段5: 禁止多次遞交表單
多次遞交表單對於web應用來說是個比較頭疼的問題,下面的程式碼能夠很好的幫助你解決這個問題:
程式碼片段6: 高亮顯示目前聚焦的輸入框標示
有時候你需要提示使用者目前操作的輸入框,你可以使用下面程式碼高亮顯示標示:
程式碼片段7: 動態方式新增表單元素
這個方法可以幫助你動態的新增表單中的元素,比如,input等:
程式碼片段8: 自動將資料匯入selectbox中
下面程式碼能夠使用ajax資料自動生成選擇框的內容
程式碼片段9: 判斷一個核取方塊是否被選中
程式碼很簡單,如下:
程式碼片段10: 使用程式碼來遞交表單
程式碼很簡單,如下:
希望大家覺得這些jQuery程式碼會對你的開發有幫助,如果你也有類似的程式碼,請和我們分享!
jQuery絕對是一個偉大的開源javascript類庫,是幫助我們快速和高效開發前端應用的利器。可能大家在日常的開發過程中常常會處理表單相關的javascript,在今天這篇程式碼片段分享文章中,這裡收集了10個超棒超實用的jQuery表單處理程式碼,希望能夠在大家的開發過程中幫助大家更好更快的處理表單相關問題,希望大家喜歡!如果你也有相關的程式碼,請大家積極分享!
程式碼片段1: 在表單中禁用“Enter鍵”
大家可能在表單的操作中需要防止使用者意外的提交表單,那麼下面這段程式碼肯定非常有幫助:
$("#form").keypress(function(e) {
if (e.which == 13) {
return false;
}
});
程式碼片段2: 清除所有的表單資料
可能針對不同的表單形式,你需要呼叫不同型別的清楚方法,不過使用下面這個現成方法,絕對能讓你省不少功夫。
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;
});
};
程式碼片段3: 將表單中的按鈕禁用
下面的程式碼對於ajax操作非常有用,你可以有效的避免使用者多次提交資料,個人也經常使用:
禁用按鈕:
$("#somebutton").attr("disabled", true);
啟動按鈕:
$("#submit-button").removeAttr("disabled");
可能大家往往會使用.attr(‘disabled’,false);,不過這是不正確的呼叫。
程式碼片段4: 輸入內容後啟用遞交按鈕
這個程式碼和上面類似,都屬於幫助使用者控制表單遞交按鈕。使用這段程式碼後,遞交按鈕只有在使用者輸入指定內容後才可以啟動。
$('#username').keyup(function() {
$('#submit').attr('disabled', !$('#username').val());
});
程式碼片段5: 禁止多次遞交表單
多次遞交表單對於web應用來說是個比較頭疼的問題,下面的程式碼能夠很好的幫助你解決這個問題:
$(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;
}
});
});
程式碼片段6: 高亮顯示目前聚焦的輸入框標示
有時候你需要提示使用者目前操作的輸入框,你可以使用下面程式碼高亮顯示標示:
$("form :input").focus(function() {
$("label[for='" + this.id + "']").addClass("labelfocus");
}).blur(function() {
$("label").removeClass("labelfocus");
});
程式碼片段7: 動態方式新增表單元素
這個方法可以幫助你動態的新增表單中的元素,比如,input等:
//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' />");
});
程式碼片段8: 自動將資料匯入selectbox中
下面程式碼能夠使用ajax資料自動生成選擇框的內容
$(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);
})
})
})
程式碼片段9: 判斷一個核取方塊是否被選中
程式碼很簡單,如下:
$('#checkBox').attr('checked');
程式碼片段10: 使用程式碼來遞交表單
程式碼很簡單,如下:
$("#myform").submit();
希望大家覺得這些jQuery程式碼會對你的開發有幫助,如果你也有類似的程式碼,請和我們分享!
相關文章
- 10個簡單實用的 jQuery 程式碼片段jQuery
- jQuery表單操作程式碼jQuery
- 經驗分享:10個簡單實用的jQuery程式碼片段jQuery
- 高效Web開發的10個jQuery程式碼片段WebjQuery
- 10個開發中實用的 jQuery 程式碼片段jQuery
- JQuery 程式碼片段收集jQuery
- 18個很棒的jQuery程式碼片段分享jQuery
- 12 個用得著的 jQuery 程式碼片段jQuery
- 收集的jQuery程式碼片段jQuery
- 12 個非常實用的 jQuery 程式碼片段jQuery
- 超級有用的9個PHP程式碼片段PHP
- 推薦 10 個超棒的 CSS3 程式碼生成工具CSSS3
- 幾個超級實用的css程式碼片段CSS
- 可以直接拿來用的15個jQuery程式碼片段jQuery
- jQuery 表單的操作jQuery
- 25 個超棒的 jQuery 訊息提醒外掛jQuery
- 直接拿來用 10個PHP程式碼片段PHP
- 10個典型實用的PHP程式碼片段PHP
- jQuery操作單選按鈕程式碼示例jQuery
- jQuery操作select下拉選單程式碼jQuery
- 13個超棒的程式碼資源網站推薦網站
- 10 個超棒的 JavaScript 簡寫技巧JavaScript
- 推薦8個超棒的學習 jQuery 的網站jQuery網站
- jQuery表單驗證簡單程式碼例項jQuery
- jquery登陸表單簡單驗證程式碼jQuery
- 10 個免費超棒的程式設計用等寬字型程式設計
- android studio sqlite操作程式碼片段AndroidSQLite
- 15 個響應式的 jQuery UI 元件的程式碼片段和模組jQueryUI元件
- jQuery操作select下拉選單常用程式碼jQuery
- 60個有用CSS程式碼片段CSS
- 分享10個最好的jQuery表單外掛jQuery
- 【實用】需要收藏備用的JQuery程式碼片段jQuery
- 建立漂亮的 CSS 按鈕的 10 個程式碼片段CSS
- 直接拿來用 九個超實用的PHP程式碼片段(二)PHP
- jquery常用表單&DOM操作方法jQuery
- jQuery清除表單資料程式碼例項jQuery
- jQuery操作select下拉選單程式碼例項jQuery
- 程式碼片段