動態新增表單欄位

測試分類, JavaScript

使用方法

  1. 下載 dynamic-form-fields JavaScript 檔案
  2. 在網頁中引用 dynamic-form-fields.js 檔案
  3. 定義表單動態新增欄位的區域ID

 

詳細介紹

  • 引用 jQuery + jQUery UI + jQuery UI Style
    1
    2
    3
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  • 引用 dynamic-form-fields.js
    1
    <script type="text/javascript" src="dynamic-form-fields.js"></script>
  • 自訂多國語系(放置引用dynamic-form-fields之前)
    1
    2
    3
    4
    5
    6
    7
    <script type="text/javascript">
    var dyfI18nLangCustom = {
    label: {
    option: '選項'
    }
    };
    </script>
  • 自訂Widget Dialog設定(放置引用dynamic-form-fields之前，請參考jQuery UI Dialog API Documentation)
    1
    2
    3
    4
    5
    <script type="text/javascript">
    var dyfJqueryUiDialogOptionCustom= {
    autoOpen: true
    };
    </script>
  • 自訂表單動態新增欄位的區域(放置引用dynamic-form-fields之前，要將新增的欄位都加入到指定的id屬性內)
    1
    2
    3
    <script type="text/javascript">
    var dyfMoveFieldArea = 'add_column';
    </script>

使用範例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>動態表單欄位</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
var dyfI18nLangCustom = {
formTitle: "新增欄位"
label: {
option: "項目"
}
};
 
var dyfJqueryUiDialogOptionCustom = {
width: 500
}
 
var dyfMoveFieldArea = 'add_column';
</script>
<script src="dynamic-form-fields.js"></script>
<input type="button" onClick="dynamicForm.createDialog();" value="增加欄位" />
<div id="add_column"></div>

展示畫面

dynamicFormDemo

相連文章

一般留言

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *