开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

提交表单不适用于使用Javascript的新添加的<input>

是指通过JavaScript动态添加到HTML表单中的<input>元素。传统的HTML表单提交是通过用户点击提交按钮或按下回车键来触发的，而使用JavaScript动态添加的<input>元素可能无法被传统的表单提交方式所捕获。

这种情况下，可以通过JavaScript来监听表单提交事件，并在事件处理程序中执行自定义的逻辑。以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>动态添加的<input>表单提交示例</title>
</head>
<body>
  <form id="myForm">
    <input type="text" name="username" placeholder="用户名">
    <input type="password" name="password" placeholder="密码">
  </form>

  <button onclick="submitForm()">提交表单</button>

  <script>
    function submitForm() {
      var form = document.getElementById("myForm");
      var formData = new FormData(form);

      // 执行自定义的逻辑，例如发送AJAX请求等
      // ...

      // 清空表单
      form.reset();
    }
  </script>
</body>
</html>

在上述示例中，我们通过JavaScript动态添加了一个<input>元素，并在页面中添加了一个按钮，点击按钮时会触发submitForm()函数。该函数获取表单元素并创建一个FormData对象，可以将表单数据以键值对的形式进行处理。然后可以执行自定义的逻辑，例如发送AJAX请求等。最后，我们通过调用form.reset()方法来清空表单。

需要注意的是，使用JavaScript动态添加的<input>元素需要在表单提交之前进行处理，以确保表单数据能够被正确地获取和处理。

相关搜索:CSS不适用于提交的输入 javascript不适用于php中动态添加的行。JavaScript中的表单提交按钮 Orchard Workflow决策活动不适用于表单域中的新行 style.animationDuration不适用于javascript。尝试使用javascript添加css属性使用Input.Choiceset的AdaptiveCard表单值作为提交按钮的返回消息使用javascript模拟单击不适用于使用datalist的输入使用python中的user-input(input)向类添加新对象如何使用Javascript提交PDF格式的表单？如何使用javascript添加新的数据行？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

实战分析表单form中禁止自动提交

本文是我本人在开发网页时，在表单中加入了button按钮，本来是用于jQuery点击相应事件的按钮，然后，但我点击button时，发现不是达到jQuery指定效果，原本以为class标签或者其他代码写错，找了很久，之后查找资料，知道表单form提交除了submit提交还有button也会提交，所以总结如何处理不然button 提交表单，在本文中，我们将讨论网页表单（form）中提交的两种方式。

00

HTML表单

创建一个表单 HTML中表单的创建使用<form>标签（双标签） <form method="post" action="index.html"></form> method="post" 指的是表单提交方式，常用值 get | post get：速度较快，但不安全。传输的文本较少；提交的内容会在提交表单之后显示在浏览器的地址栏；不适合密码之类的传输； post：速度慢，但是安全。与get相反。适合用于注册表单、登录表单之类的传输。 action="index.html"指的是表单提交成功后要跳转的页面。

02

form表单提交的几种方式

完成后启动项目并访问http://localhost:8080/query.html 输入用户名和密码

02

IT课程 HTML基础 015_HTML5新特性

HTML5 是 HTML 的最新版本，它引入了许多新的标签、属性和功能，大大增强了 web 的功能和互动性。

01

thinkphp-ajax异步验证之ajaxReturn的使用

但是，观察输出的信息，发现serialize()方法做的是将表单中的数据以htpp请求格式拼接成字符串。

03

JSP 防止网页刷新重复提交数据

if session("ok")=true then response.write "错误，正在提交" response.end end if

02

JavaScript学习笔记（五）——Ajax

jQuery插件就是开发爱好者自己利用jQuery制作的特效，然后打包成js文件，发布到网上供大家使用的脚本集合。

01

表单脚本

刚开始人们使用JavaScript，最主要的目的之一就是表单的验证，分担服务器处理表单的责任。虽然现流行的大部分提交方式是通过ajax，但了解表单，对于ajax方式也是有重大帮助的！所以，大家不要看轻表单。

04

HTML（表单）

get：速度较快，但不安全。传输的文本较少；提交的内容会在提交表单之后显示在浏览器的地址栏；不适合密码之类的传输；

01

HTML5学习笔记(一)

1.什么是 HTML5？ HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。 HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。 HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。 2.HTML5 是如何起步的？ HTML5 是 W3C 与 WHATWG 合作的结果。编者注：W3C 指 World Wide Web Consortium，万维网联盟。编者注：WHATWG 指 Web Hypertext Appl

05

form实现表单提交的各种方法(表单提交源码)

这种方法实际上是调用了一个javascript函数，使用javacript函数来提交表单，方法就非常多非常灵活了，比如可以把它加入到任意一个标签的onclick事件中：

03

HTML5 新特性_CSS3新特性

（1）HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准；

03

JavaScript(十三)

这一篇，我们说说表单。 JavaScript 最初的一个应用，就是分担服务器处理表单的责任。

02

jquery的form表单提交

在Web开发中，表单提交是一个常见的操作，通过表单提交用户可以向服务器发送数据。jQuery是一个流行的JavaScript库，可以简化处理JavaScript的操作，包括表单提交。在本篇博客中，我们将介绍如何使用jQuery来实现表单提交操作。

01

JavaWeb防止表单重复提交的几种方式

（4）、ajax提交加锁采用ajax方式提交表单时，设置一个布尔变量（true/false），当然其他类型变量也可以。初始时为true可以提交,在前端向服务器发出请求后，服务端响应结果没有回来之前将该值置为false，正常响应时再置为true。

02

HTML学习笔记二

< input >标签元素最重要的是表单元素，标签根据不同的 type 属性，有多态性。

02

【Java 进阶篇】JavaScript 表单验证详解

JavaScript 表单验证是网页开发中不可或缺的一部分。它允许您确保用户在提交表单数据之前输入了有效的信息。无论您是一个初学者还是一个有经验的开发人员，本文将为您详细介绍如何使用 JavaScript 来进行表单验证。我们将从基础知识开始，逐步深入，以确保您全面了解这个主题。

02

Laravel 表单方法伪造与 CSRF 攻击防护

有时候，我们可能需要手动定义发送表单数据所使用的 HTTP 请求方式，而 HTML 表单仅支持 GET 和 POST 两种方式，如果要使用其他的方式，则需要自己来定义实现。

04

js与form交互方式总结

前言：刚开始接触web开发的时候，往往采用form表单直接提交的方式，但可能存在兼容问题，如：

04

Validform jquery

在前端开发中，表单验证是非常重要的一环，能够有效地提升用户体验和数据完整性。Validform 是一个基于 jQuery 的表单验证插件，它简单易用，功能强大，广泛应用于各类网站和Web应用中。本篇文章将详细介绍 Validform jQuery 插件的用法和功能。

01

input如何快速进行规则校验

input输入框是日常前端开发过程中经常会遇到的，输入框是为了进行用户交互，用户提交或输入数据，那么在安全方面我们要做好把控工作，通常我们会制定规则来限制用户输入，在表单属性之外的如何快速校验呢？我们一起来看看把！

01

为什么HTML Action突然成为JavaScript的趋势

Astro 做到了。React 全力以赴。就像复古的妈妈牛仔裤，HTML action 又从 20 世纪 90 年代回来了。以下是它们风靡一时的原因。

01

html+css+JavaScript例题

这个例题主要是做一个表格，一个存储学生资料的表格，能够完成以下功能：添加学生删除学生修改学生分页查询学生 html代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <link rel="stylesheet" href="css/style_A.css" />

01

Jquery 实现表单提交按钮变灰，防止多次点击提交重复数据

表单提交时候我们应该控制提交按钮，不能点击多次进行数据的重复提交。要不然就会有冗余的重复的数据在系统中，造成系统出现数据垃圾。jQuery很简单的就可以实现对表单提交按钮控制，下面就是相关的例子和代码。

02

c#以POST方式模拟提交表单

这是我一年前写的一个用C#模拟以POST方式提交表单的代码，现在记录在下面，以免忘记咯。那时候刚学C#~忽忽。。很生疏。。代码看上去也很幼稚臃肿不堪 #region 内容添加函数(Contentinsert) public string Contentinsert(string bookID, string bookTitle, string bookContent,string taskUrl,string Ztagend) { string uriS

09

学习利用JSON 摆脱表单与业务对象双向转换的繁琐工作

我想所有处理表单程序的同仁都会觉得很无聊，显示数据的时候要将业务对象一一绑定到表单，处理提交表单的时候要将包含在表单中的字段一个个再绑定到业务对象。这个过程很繁琐，而且修改的时候也不愉快。以前表单的处理程序基本上都延着这样的套路（这里以C#为例，其它语言大致相同）： textBoxPersonName.Text = person.Name; textBoxPersonBirthday.Text = person.Birthday.ToString("yyyy-MM-dd"); int index = 0;

Flask 入门系列教程（四）

在 WEB 应用当中，表单是和用户交互的最常见的方式之一，学习好表单，是非常重要的，用户登录注册、撰写文章等等操作都离不开表单的功能。表单的处理并不简单，除了要创建表单，还需要做相关的验证，还有错误提示等等。这些操作如果都从头开始编写，那么就太复杂了，不过幸运的是，我们有强大的 WTForms 帮助我们解决。

03

HTML-CSS基础学习

HTML代表了结构，结构是网页的骨架，从语义的角度，描述页面结构。 CSS代表了样式，样式是网页的外观，从审美的角度，美化页面。 JavaScript代表行为，行为是网页的交互逻辑，从交互的角度，提升用户体验。

03

微信小程序之图片选择、预览与上传

所谓：一图胜千言。这话说明了图片描述事物的能力是非常强大的（怪不得我们可以用表情包聊一整天），尤其现在的手机拍照功能那么方便，用户对使用拍照和相册的需求日益上升。因此，在我们的移动应用中，可能经常会碰到这样的功能需求，需要为用户提供在相册中选择照片或者拍照片并上传的功能。

06

JavaScript 学习-42.jQuery 提交表单 submit() 方法

前言 submit() 方法不带参数，就是触发 submit 事件，带function 参数，就是执行 submit 事件时运行的函数。触发 submit 事件通过 jquery 的submit() 方法，可以出发submit 事件 form表单示例 <form id="demo" method="get">

<label for="user">用户名:</label> <input type="text" id="us

04

JavaScript—Element元素对象

上一篇介绍了Element对象，Element对象表示HTML里的元素。Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点，所谓的节点就是一个个的标签元素，Document 对象可以得到Element 对象，可通过 document .Element 对其进行访问。

01

前端学习笔记之HTML中的id,name,class区别

name 属性用于在 JavaScript 中对元素进行引用，或者在表单提交之后，对表单数据进行引用。

02

JavaScript表单基础

我们应该知道JavaScript设计的的初衷很大程度上是为了处理表单验证，因为在那个远古时代表单验证是通过后台来验证的，网速都比较慢，我们向后台发送数据都需要很长时间才能接收返回数据，动则几分钟少则几十秒，用户体验极其不佳。JavaScript在设计在网页校验，直接就能告诉用户结果，它还增加了很多表单控件的默认行为，这直接让这门语言火了起来。

02

MVC项目开发中那些用到的知识点(Ajax.BeginForm)

AjaxFormPost为Action，Home为控制器，new {ID=“11”，ClassName="FirstClass"}为路由参数即Url参数

02

什么是AJAX？

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

02

JSP常用跳转方式

http://blog.csdn.net/wanghuan203/article/details/8836326#comments

01

FormData 对象的使用

FormData对象用以将数据编译成键值对，以便用XMLHttpRequest来发送数据。其主要用于发送表单数据，但亦可用于发送带键数据(keyed data)，而独立于表单使用。如果表单enctype属性设为multipart/form-data ，则会使用表单的submit()方法来发送数据，从而，发送数据具有同样形式。

02

6.HTML输入表单标签元素介绍

描述: 表单是一个包含表单元素的区域，表单元素是允许用户在表单中输入内容,其包含文本框、文本域(textarea)、按钮、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等元素都要放在form标签里面或者进行form的id值的调用，否则提交的数据到不了后端。

01

PHP的文件上传操作

HTML5学堂：关于文件上传，主要包括“构建基本表单”-“使用AJAX发送请求，上传文件”-“使用PHP获取文件基本信息”-“执行SQL语言，返回基本图片路径”-“使用DOM操作设置预览图路径”。一起

05

HTML中id、name、class 区别

id的用途 1） id是HTML元素的Identity，主要是在客户端脚本里用。

02

防止Web表单重复提交的方法总结

在Web开发中，对于处理表单重复提交是经常要面对的事情。那么，存在哪些场景会导致表单重复提交呢？表单重复提交会带来什么问题？有哪些方法可以避免表单重复提交？

02

HTML5-表单

当使用form提交数据时：在HTML4中，input、button和其他与表单相关的元素必须放在form元素中；在HTML5中，这条限制不复存在。可以将这类元素与文档中任何地方的表单挂钩（通过表单元素的form属性【下述示例3】）。

06

（续）很久很久以前学的，16个HTML笔记

超链接分为外部链接、内部链接、文本链接、图片链接、下载链接、空链接、电子邮件链接等。

03

H5

1.H5属性双色字 //------------------------------------------------- <style> .text{ position: relative; display: inline-block; font-size: 80px; color: deepskyblue; overflow: hidden;

02

IT课程 HTML基础 013_表单和用户输入

HTML 表单（Form）是 HTML 中非常重要的一部分，它能让用户在网页上输入信息，并将信息提交到服务器。

01

input属性bypass csp

前两天看到一篇文章，可以通过input标签的某些属性，来控制form获取crsftoken并且完美bypass csp。

02

常见的Form表单提交方式

在进行项目编程的时候,我们难免会去编写一些简单的前端页面. 而编写前端页面就力不开 form表单的支持. 下面就form表单的提交方式进行如下探寻

01

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭