当前位置: 首页 > news >正文

FormData获取表单,发现有些字段没有获取到,

使用 new FormData(formElement) 创建一个 FormData 对象,它会自动收集表单中的所有输入字段数据(包括文本框、文件输入、选择框等)
获取表单的代码:

var mainstr = new FormData(document.getElementById("inputInfoForm"));

FormData 会自动收集 表单中所有具有 name 属性的可提交元素,但不会收集 没有 name 属性的元素。

示例如下

<form id="inputInfoForm">
    <input type="text" name="username" value="张三">
    <input type="text" value="李四">  <!-- 没有 name,不会被 FormData 收集 -->
    <input type="password" name="password" value="123456">
    <textarea name="bio">这是简介</textarea>
    <select name="gender">
        <option value="male" selected></option>
        <option value="female"></option>
    </select>
    <input type="file" name="profilePic">
</form>
<script>
    var formElement = document.getElementById("inputInfoForm");
    var formData = new FormData(formElement);

    for (let pair of formData.entries()) {
        console.log(pair[0] + ": " + pair[1]);
    }
</script>

输出

username: 张三
password: 123456
bio: 这是简介
gender: male
profilePic: (文件对象,若选择了文件)

注意: value=“李四” 的输入框没有 name,所以它不会出现在 FormData 里!

如何手动添加没有 name 的元素?

如果某个输入框没有 name,但你仍然想把它加入 FormData,可以使用 append() 方法:

formData.append("customField", document.querySelector("input[type='text']").value);

相关文章:

  • 鸿蒙Android4个脚有脚线
  • Gitlab配置personal access token
  • 从零开发基于Qt6的TCP/UDP网络调试助手:技术架构与实现细节
  • (二 十 三)趣学设计模式 之 解释器模式!
  • C++第一节:类与对象
  • Spring Cloud Alibaba 实战:轻松实现 Nacos 服务发现与动态配置管理
  • 华为OD-E卷 - 最大矩阵和 100分(java)
  • 三参数水质在线分析仪:从源头保障饮用水安全
  • 《2025年软件测试工程师面试》消息队列面试题
  • CSharp和Java
  • 【ThreeJS Basics 06】Camera
  • C++进阶(七)--STL--bitset(位图)的介绍与基本功能模拟实现
  • PyCharm环境配置实战:从搭建到优化的完整指南
  • 观察者模式的C++实现示例
  • Qt:事件
  • 【MySQL】用MySQL二进制包构建docker镜像
  • 基于javaweb的SpringBoot田径运动会管理系统设计和实现(源码+文档+部署讲解)
  • 天津大学02-深度解读DeepSeek:部署、使用、安全【文末附下载链接】
  • leetcode:2965. 找出缺失和重复的数字(python3解法)
  • c盘爆红后,使用diskgenius给C盘无损扩容,操作记录
  • 长寿做网站/seo营销推广平台
  • 南山老品牌网站建设/德芙巧克力软文推广
  • 想自己做网站该学些什么/怎么推广一个app
  • 给素材网站做签约设计不想做了/1元购买域名
  • 写作网站5妙不写就删除/商旅平台app下载
  • 厦门网页制作厦门小程序app/seo管理工具