Javascript腳本獲取form和input內(nèi)容的方法(兩種方法)
Javascript腳本獲取form和input內(nèi)容的方法
隨著js的發(fā)展,許多的網(wǎng)頁數(shù)據(jù)處理完全可以由js腳本解決,而不需要發(fā)送到服務(wù)器
這里分享兩種Javascript腳本獲取form和input內(nèi)容的方法
第一種方法:
直接上代碼
HTML:
<input type="text" name="test" id = "text"> <button type="submit" onclick="add()">添加數(shù)據(jù)</button>
js:
var string = "Hello" function add(){ var Name = document.getElementById('text').value; string += Name; alert(string); }
可以直接獲取輸入內(nèi)容
第二種方法:
js:
var x = document.forms["form"]["test"][i].value;
如果HTML中表格的name是"form"而其中有多個(gè)input選項(xiàng)var x = document.forms["form"]["test"];返回的是一個(gè)數(shù)組,可通過下標(biāo)訪問每一個(gè)input元素
補(bǔ)充:form提交不刷新網(wǎng)頁方法
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>8421碼轉(zhuǎn)化</title> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="template.js"></script> </head> <body> <div class="row"> <div class="col-md-4"></div> <div class="col-md-4"> <h1>8421碼轉(zhuǎn)化</h1> <form id = "num" target="hidden" name="form" > <button class="btn btn-default" onclick="outPut()">submit</button> <input class="btn btn-default" type="reset" name="button" id="button" value="重置"> <br> </form> <button onclick="addNum()" class="btn btn-default">點(diǎn)擊添加下一個(gè)數(shù)字</button> <button onclick="remove()" class="btn btn-default">刪除最后一個(gè)數(shù)字</button> <p id = "demo"></p> <iframe name="hidden" style="display:none;"></iframe> </div> <div class="col-md-4"></div> </div> </body> </html>
到此這篇關(guān)于Javascript腳本獲取form和input內(nèi)容的方法的文章就介紹到這了,更多相關(guān)js獲取form和input內(nèi)容內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
html+javascript實(shí)現(xiàn)可拖動(dòng)可提交的彈出層對(duì)話框效果
本文為大家介紹下使用html+javascript實(shí)現(xiàn)可拖動(dòng)彈出層、對(duì)話框、可提交,具體代碼如下,感興趣的朋友可以參考下,希望對(duì)大家有所幫助2013-08-08JavaScript 驗(yàn)證碼的實(shí)例代碼(附效果圖)
JavaScript 驗(yàn)證碼的實(shí)例代碼(附效果圖),需要的朋友可以參考一下2013-03-03JavaScript設(shè)計(jì)模式之責(zé)任鏈模式實(shí)例分析
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之責(zé)任鏈模式,結(jié)合實(shí)例形式分析了責(zé)任鏈模式的概念、原理及具體定義與使用技巧,需要的朋友可以參考下2019-01-01全面解讀TypeScript和JavaScript的區(qū)別
TypeScript和JavaScript是目前項(xiàng)目開發(fā)中較為流行的兩種腳本語言, TypeScript是JavaScript的一個(gè)超集,JavaScript是一種輕量級(jí)的解釋性腳本語言,本文主要介紹了兩者區(qū)別,感興趣的可以了解一下2023-09-09使用JavaScript實(shí)現(xiàn)一個(gè)交互式音樂播放器
JavaScript,作為前端開發(fā)的重要語言,可以實(shí)現(xiàn)許多復(fù)雜的功能,在這篇文章中,我們將一起創(chuàng)建一個(gè)交互式的音樂播放器,快跟隨小編一起學(xué)習(xí)一下吧2024-01-01JavaScript 高級(jí)篇之閉包、模擬類,繼承(五)
本篇主要分享我對(duì)閉包的理解及使用閉包完成私有屬性、模擬類、繼承等,結(jié)合大量例子,希望大家能快速掌握!首先讓我們先從一些基本的術(shù)語開始吧2012-04-04簡述JavaScript提交表單的方式 (Using JavaScript Submit Form)
這篇文章主要介紹了簡述JavaScript提交表單的方式 (Using JavaScript Submit Form)的相關(guān)資料,需要的朋友可以參考下2016-03-03JS項(xiàng)目中對(duì)本地存儲(chǔ)進(jìn)行二次的封裝的實(shí)現(xiàn)
這篇文章主要介紹了JS項(xiàng)目中對(duì)本地存儲(chǔ)進(jìn)行二次的封裝,這里我們將要使用到的key存儲(chǔ)下來,新建一個(gè)叫constant-storage.js的文件,對(duì)外暴露一些key的鍵名,也方便后期統(tǒng)一修改,這里因?yàn)槎际呛懔?,所以名稱我們都用大寫表示,需要的朋友可以參考下2022-07-07