動態新增表單欄位

使用方法

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

詳細介紹

引用 jQuery + jQUery UI + jQuery UI Style

<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

<script type="text/javascript" src="dynamic-form-fields.js"></script>

自訂多國語系(放置引用dynamic-form-fields之前)

<script type="text/javascript">
	var dyfI18nLangCustom = {
		label: {
			option: '選項'
		}
	};
</script>

自訂Widget Dialog設定

(放置引用dynamic-form-fields之前，請參考jQuery UI Dialog API Documentation)

<script type="text/javascript">
	var dyfJqueryUiDialogOptionCustom= {
		autoOpen: true
	};
</script>

自訂表單動態新增欄位的區域(放置引用dynamic-form-fields之前，要將新增的欄位都加入到指定的id屬性內)

<script type="text/javascript">
	var dyfMoveFieldArea = 'add_column';
</script>

使用範例

<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>

展示畫面