JavaScript - 从表单中获取数据

在网页开发中，表单是非常常见的，例如登录表单、注册表单、搜索表单等。在用户填写表单后，我们通常需要从表单中获取到用户输入的数据，以便后续的处理和使用。本篇文章将介绍如何使用 JavaScript 从表单中获取数据。

输入型表单元素

输入型表单元素包括：文本框（input type="text")、密码框（input type="password")、多行文本框（textarea）和下拉框（select）等。

获取文本框和密码框的值

我们可以使用 document.getElementById() 方法获取到对应的元素，然后通过 value 属性获取其值。例如：

<input type="text" id="username">

let username = document.getElementById("username").value;

获取多行文本框的值

多行文本框同样可以通过 document.getElementById() 方法获取到对应的元素，然后通过 value 属性获取其值。例如：

<textarea id="content"></textarea>

let content = document.getElementById("content").value;

获取下拉框选中的值

下拉框的获取稍微有一些不同，需要通过 selectedIndex 属性获取到选中项的索引，再通过 options 属性获取到对应的选项。例如：

<select id="fruit">
    <option value="apple">苹果</option>
    <option value="banana">香蕉</option>
    <option value="orange">橙子</option>
</select>

let fruit = document.getElementById("fruit");
let selectedIndex = fruit.selectedIndex;
let selectedValue = fruit.options[selectedIndex].value;

选择型表单元素

选择型表单元素包括：单选框（input type="radio")、复选框（input type="checkbox")等。

获取单选框的值

单选框需要首先获取到选择框的 name 属性，然后通过 document.getElementsByName() 方法获取到相同名称的元素，再通过循环判断选中的元素。例如：

<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女

let genders = document.getElementsByName("gender");
for (let i = 0; i < genders.length; i++) {
    if (genders[i].checked) {
        let gender = genders[i].value;
    }
}

获取复选框的值

复选框同样也需要获取到选中元素的名称和值。由于复选框可以多选，所以需要使用数组来存储选中的值。例如：

<input type="checkbox" name="fruit" value="apple">苹果
<input type="checkbox" name="fruit" value="banana">香蕉
<input type="checkbox" name="fruit" value="orange">橙子

let fruits = document.getElementsByName("fruit");
let selectedFruits = [];
for (let i = 0; i < fruits.length; i++) {
    if (fruits[i].checked) {
        selectedFruits.push(fruits[i].value);
    }
}

提交表单

在获取到表单数据后，我们可以将其提交给服务器进行处理。表单提交通常需要使用 form.submit() 方法，例如：

<form id="myForm" action="http://localhost:8080/" method="post">
    <!-- 表单元素 -->
    <input type="submit" value="提交">
</form>

let myForm = document.getElementById("myForm");
myForm.submit();

总结

以上就是从表单中获取数据的方法，使用 JavaScript 可以方便地获取表单数据，便于后续的处理和使用。下面是一个完整的表单获取数据的代码示例：

<form id="myForm" action="http://localhost:8080/" method="post">
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username"><br>

    <label for="password">密码：</label>
    <input type="password" id="password" name="password"><br>

    <label for="content">内容：</label>
    <textarea id="content" name="content"></textarea><br>

    <label for="fruit">水果：</label>
    <select id="fruit" name="fruit">
        <option value="apple">苹果</option>
        <option value="banana">香蕉</option>
        <option value="orange">橙子</option>
    </select><br>

    <label>性别：</label>
    <input type="radio" name="gender" value="male">男
    <input type="radio" name="gender" value="female">女<br>

    <label>水果：</label>
    <input type="checkbox" name="fruit" value="apple">苹果
    <input type="checkbox" name="fruit" value="banana">香蕉
    <input type="checkbox" name="fruit" value="orange">橙子<br>

    <input type="submit" value="提交">
</form>

<script>
    let myForm = document.getElementById("myForm");

    myForm.addEventListener("submit", function(event) {
        event.preventDefault();

        let username = document.getElementById("username").value;
        let password = document.getElementById("password").value;
        let content = document.getElementById("content").value;

        let fruit = document.getElementById("fruit");
        let selectedIndex = fruit.selectedIndex;
        let selectedFruit = fruit.options[selectedIndex].value;

        let genders = document.getElementsByName("gender");
        let selectedGender;
        for (let i = 0; i < genders.length; i++) {
            if (genders[i].checked) {
                selectedGender = genders[i].value;
            }
        }

        let fruits = document.getElementsByName("fruit");
        let selectedFruits = [];
        for (let i = 0; i < fruits.length; i++) {
            if (fruits[i].checked) {
                selectedFruits.push(fruits[i].value);
            }
        }

        // TODO 将表单数据提交到服务器

        console.log("用户名：" + username);
        console.log("密码：" + password);
        console.log("内容：" + content);
        console.log("选择的水果：" + selectedFruit);
        console.log("选择的性别：" + selectedGender);
        console.log("选择的水果：" + selectedFruits);
    });
</script>