雷鳴表單輔助表單工具
針對html的form表單提交,自動獲取要提交的輸入數(shù)據(jù)、自動根據(jù)接口返回信息進行填充輸入項。
快速體驗
http://res.zvo.cn/from.js/demo.html
(進入后查看源代碼,即可看到它的demo實現(xiàn))
使用說明
首先,網(wǎng)頁中要引入一個js
<script src="http://res.zvo.cn/from.js/from.js"></script>
比如這個html代碼
<script src="http://res.zvo.cn/from.js/from.js"></script> <div id="from_id"> 選擇: <select name="storage"> <option value="1">本地存儲</option> <option value="2">SFTP存儲</option> </select> <br/> username:<input type="text" name="username" value="222" /><br/> password:<input type="text" name="password" value="333" /><br/> info:<textarea name="info"></textarea> </div>
自動獲取要提交的輸入數(shù)據(jù)
根據(jù)指定的id,搜索這個id范圍內(nèi),出現(xiàn)的 input、textarea、select 等標(biāo)簽,并取出其內(nèi)容,變?yōu)榭梢赃M行ajax提交的格式。
代碼示例:
<button onclick="getJsonData();">獲取表單數(shù)據(jù)</button> <script> function getJsonData(){ var data = from.getJsonData('from_id'); console.log('自動獲得的輸入數(shù)據(jù):'); console.log(data); //彈出窗口看下數(shù)據(jù) alert(JSON.stringify(data, null, 4)); } </script>
自動根據(jù)接口返回信息進行填充輸入項
根據(jù)指定的id,搜索這個id范圍內(nèi),出現(xiàn)的 input、textarea、select 等標(biāo)簽,并取出其內(nèi)容,變?yōu)榭梢赃M行ajax提交的格式。
代碼示例:
<button onclick="fill();">自動填充表單</button> <script> function fill(){ var data = { 'storage':'2', 'username':'管雷鳴', 'password':'123', 'info':'hello word' }; from.fill('from_id',data); } </script>
評論
圖片
表情
