js 获取表单数据
2021/10/29 6:10:14
本文主要是介绍js 获取表单数据,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
三种方法:
- formData: form.onsubmit中 new FormData(formElement)
- form.elements 遍历,利用e.type判断类型再获取e.name,e.value
- Vue 通过v-model表单输入绑定
html
<form id="form" method="post"> <select id="select1" name="select"> <option value="" disabled selected>--请选择--</option> <option value="1">--1--</option> <option value="2">--2--</option> <option value="3">--3--</option> </select> <input id="radio1" type="radio" name="sex" value="female" />female <input id="radio2" type="radio" name="sex" value="male" />male <input id="text1" type="text" name="text" /> <fieldset> <legend>请做出选择:(多选)</legend> <input type="checkbox" name="checkbox" value="A" />A <input type="checkbox" name="checkbox" value="B" />B <input type="checkbox" name="checkbox" value="C" />C </fieldset> <input type="submit" value="提交" /> </form>
formdata
let serialNumber = 0 const formElement = document.querySelector("#form") formElement.onsubmit = getFormData function getFormData(e) { let formData = new FormData(formElement) formData.append("serialNumber", ++serialNumber) for ([name, value] of formData.entries()) { console.log(`${name}:${value}`) } /* 手动发送数据 xhr */ // var request = new XMLHttpRequest() // request.open("POST", "submitform.php") // request.send(formData) e.preventDefault() }
form.elements
const formElement = document.querySelector("#form") formElement.onsubmit = getFormData function getFormData(e) { let res = [] Array.prototype.forEach.call(form.elements, (e) => { console.log(e.type, e.name, e.value) //e.nodeType是判断元素节点 文本节点 注释节点 属性节点的。 switch (e.type) { case "select-one": // select控件的类型是 select-one case "text": case "textarea": res.push([e.name, e.value]) break case "checkbox": case "radio": if (e.checked) { res.push([e.name, e.value]) } break default: // 其他的控件 如 button fieldset等 什么也不做 break } }) console.log(res) e.preventDefault() }
这篇关于js 获取表单数据的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist
- 2024-03-11icons for vue
- 2024-03-07breadcrumbs react js
- 2024-03-06react login page example
- 2024-03-06react router uselocation
- 2024-03-04postgres jsonb_set