js 获取表单数据

本文主要是介绍js 获取表单数据，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

三种方法：

1. formData: form.onsubmit中 new FormData(formElement)
2. form.elements 遍历，利用e.type判断类型再获取e.name,e.value
3. 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 获取表单数据的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！