jQuery復(fù)制表單元素附源碼分享效果演示
我們在提交表單時,有時會遇到需要重復(fù)添加多個相同表單元素,如訂單信息中需要添加多個不同型號的產(chǎn)品、表單數(shù)據(jù)中新增字段信息等。這個時候我們可以在表單中直接放置一個“新增一項”或“復(fù)制”按鈕,通過點擊按鈕即可實現(xiàn)復(fù)制表單元素。
HTML
本文我們通過實例介紹一款簡單的基于jQuery的元素復(fù)制插件,通過調(diào)用該插件輕松實現(xiàn)元素復(fù)制功能。
首先載入jQuery庫文件和元素復(fù)制插件duplicateElement.min.js。
<script src="jquery.js"></script> <script src="duplicateElement.min.js"></script>
我們假設(shè)需要復(fù)制用戶信息元素,表單html結(jié)構(gòu)如下:
<form id="myform" name="myform" action="post.php" method="post"> <fieldset id="additional"> <label for="name">客戶姓名:</label> <input id="name" name="name[]" type="text" class="input" > <label for="flag">客戶級別:</label> <select id="flag" name="flag[]"> <option disabled="" selected="">請選擇</option> <option value="1">VIP</option> <option value="2">普通</option> </select> <a href="javascript:void(0);" class="btn remove">移除</a> <a href="javascript:void(0);" class="btn create">復(fù)制</a> </fieldset> <br/> <div class="sub_btn"> <input type="submit" class="button" value="提交"> </div> </form>
jQuery
我們點擊“復(fù)制”按鈕時,將#additional里的內(nèi)容進(jìn)行復(fù)制,相當(dāng)于新增一行,初始的時候只顯示“復(fù)制”按鈕,復(fù)制完后,原來的那條則顯示“移除”按鈕,點擊“移除”則可將對應(yīng)的行移除。
$(function () { $('#additional').duplicateElement({ "class_remove": ".remove", "class_create": ".create", onCreate: function (el) { el.find("select").prop('defaultSelected'); el.find(".input").val(''); } }); });
我們還可以通過onCreate()回調(diào)函數(shù)來定義復(fù)制成功后,新增的表單元素的屬性,如表單元素值或樣式等。
以上內(nèi)容就是給大家分享的jQuery復(fù)制表單元素附源碼分享效果演示,希望對大家有所幫助。
相關(guān)文章
使用jQuery全局事件ajaxStart為特定請求實現(xiàn)提示效果的代碼
首先,重寫Ajax方法的代價太高,仍然可以利用jQuery自身的Ajax Events。2010-12-12JQuery頁面的表格數(shù)據(jù)的增加與分頁的實現(xiàn)
使用JQuery實現(xiàn)頁面的表格數(shù)據(jù)的增加與分頁,具體示例如下,喜歡的朋友可以參考下2013-12-12jQuery學(xué)習(xí)總結(jié)之元素的相對定位和選擇器(持續(xù)更新)
jQuery中不僅可以使用選擇器就行絕對定位,而且還可以進(jìn)行相對定位,只要在$()中指定第二個參數(shù),第二個參數(shù)就是相對的元素。第二個參數(shù)傳遞一個jQuery對象,則相對于這個對象為基準(zhǔn)進(jìn)行相對的選擇。2011-04-04jQuery插件MixItUp實現(xiàn)動畫過濾和排序
MixItUp過濾排序jQuery插件是一款鼠標(biāo)滑過圖片顯示描述的jQuery過濾排序插件。是一款輕量,但功能強大的 jQuery 插件,提供了對分類和有序內(nèi)容的美麗的動畫過濾和排序功能。特別適合用于作品集網(wǎng)站,畫廊,圖片博客以及任何的分類或有序內(nèi)容。2015-04-04