js獲取form表單中name屬性的值

更新時間：2019年02月27日 15:50:59 作者：踩坑的土撥鼠

今天小編就為大家分享一篇關(guān)于js獲取form表單中name屬性的值，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧

在項目中因為動態(tài)表單無法確定標(biāo)簽name屬性的值，因此需要即時獲取以便進(jìn)行存儲。前端代碼如下：

<div class="control-group">
<label class="control-label">土撥鼠常挖坑</label>
<form:input path="formAttribute1" class="input-xlarge" value="" name="測試1"/></div>
<form:input path="formAttribute1" class="input-xlarge" value="" name="測試2"/></div>
<form:input path="formAttribute1" class="input-xlarge" value="" name="測試3"/></div>

1、attr：$("#formAttribute1").attr("name");然后得到的值是formAttribute1(有沒有前輩能給我講講為什么呀)

2、prop：問題同上

3、在上述兩種方式都失敗后，整個人不行了。最后找到了一個相對可行的方式，對class屬性做修改，獲取全部值，然后通過<c:foreach>標(biāo)簽獲取this.value 和this.name，并放入map中。具體操作可參考如下代碼(與上面代碼區(qū)別在于class屬性，在此處添加了property作為標(biāo)識，此處可自定義名稱)

<div class="control-group">
<label class="control-label">土撥鼠常挖坑</label>
<form:input path="formAttribute1" class="input-xlarge property" value="" name="測試1"/></div>
<form:input path="formAttribute1" class="input-xlarge property" value="" name="測試2"/></div>
<form:input path="formAttribute1" class="input-xlarge property" value="" name="測試3"/></div>

JS方法如下：

<script type="text/javascript">
   $("#btnSubmit").on("click",function () { //事件綁定btnSubmit是信息填寫完畢提交處的按鍵
     var propertyMap= {};
     $(".property").each(function () {
       propertyMap[this.name] = this.value;
     });
    var propertyInfo= JSON.stringify(propertyMap);
     alert($("#propertyInfo")
   });
 </script>

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，謝謝大家對腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請查看下面相關(guān)鏈接

您可能感興趣的文章:

相關(guān)文章

Javascript+CSS實現(xiàn)影像卷簾效果思路及代碼
Arcmap里面的一個卷簾效果肯定記憶很深刻，我也對這種比較炫的卷簾效果做了一下研究，現(xiàn)在給大家匯報下結(jié)果
2014-10-10
使用javascript實現(xiàn)判斷當(dāng)前瀏覽器
這篇文章主要介紹了使用javascript實現(xiàn)判斷當(dāng)前瀏覽器的類型及版本，雖然不是很全面，但是還是推薦給大家，簡單學(xué)下方法和思路。
2015-04-04
微信小程序?qū)崿F(xiàn)商品分類頁過程結(jié)束
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)商品分類頁列表方法，商品分類頁主要是需要實現(xiàn)商品類目和對應(yīng)商品標(biāo)題的聯(lián)動跳轉(zhuǎn)，文中過程詳細(xì)，感興趣的小伙伴們可以參考一下
2023-05-05
JavaScript獲取時間戳的方法總結(jié)
JavaScript獲得時間戳的方法有五種,后四種都是通過實例化時間對象new Date() 來進(jìn)一步獲取當(dāng)前的時間戳,下面我們就一起學(xué)習(xí)一下具體獲取的方法吧
2023-09-09
詳解JavaScript中的4種類型識別方法
JavaScript中檢測對象類型的運算符有：typeof、instanceof，還有對象的constructor屬性： 1) typeof 運算符 typeof 是一元運算符，返回結(jié)果是一個說明運算數(shù)類型的字符串。下面由小編給大家分享JavaScript中的4種類型識別方法，需要的朋友可以參考下本文
2015-09-09
JavaScript實現(xiàn)手風(fēng)琴效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)手風(fēng)琴效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-02-02
javascript中的altKey 和 Event屬性大全
本文給大家介紹javascript中的altkey和event屬性大全，涉及到altkey和event屬性語法定義及用法，本文介紹的非常詳細(xì)，感興趣的朋友一起看看吧
2015-11-11
解決一個微信號同時支持多個環(huán)境網(wǎng)頁授權(quán)問題
由于微信限制一個服務(wù)號只能配置一個網(wǎng)頁授權(quán)域名，又不可能給每個環(huán)境單獨配一個服務(wù)號，這樣不僅需要成本而且很浪費資源，下面小編給大家?guī)砹私鉀Q一個微信號同時支持多個環(huán)境網(wǎng)頁授權(quán)問題，感興趣的朋友一起看看吧
2019-08-08
JS計算輸出100元錢買100只雞問題的解決方法
這篇文章主要介紹了JS計算輸出100元錢買100只雞問題的解決方法,簡單描述了100元錢買100只雞問題并結(jié)合實例形式分析了問題解決的思路與具體實現(xiàn)方法,需要的朋友可以參考下
2018-01-01
微信小程序自定義彈框效果
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義彈框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-07-07