创建具有动态扩展文本框的表单
是一种常见的前端开发需求，可以通过以下步骤实现：
- HTML结构：创建一个表单元素，并在其中添加一个初始的文本框。
<form>
<div id="textFields">
<input type="text" name="field1" placeholder="文本框1">
</div>
<button type="button" onclick="addTextField()">添加文本框</button>
</form>- JavaScript函数：编写一个JavaScript函数，用于在点击"添加文本框"按钮时动态添加新的文本框。
function addTextField() {
var textFieldsContainer = document.getElementById("textFields");
var textFieldCount = textFieldsContainer.getElementsByTagName("input").length + 1;
var newTextField = document.createElement("input");
newTextField.type = "text";
newTextField.name = "field" + textFieldCount;
newTextField.placeholder = "文本框" + textFieldCount;
textFieldsContainer.appendChild(newTextField);
}以上代码中，addTextField()函数会获取文本框容器的引用，并计算当前文本框数量，然后创建一个新的文本框元素，并设置其名称和占位符，最后将其添加到文本框容器中。
- CSS样式（可选）：根据需要，可以添加一些CSS样式来美化表单和文本框。
form {
margin-bottom: 10px;
}
input[type="text"] {
margin-bottom: 5px;
}这样，当用户点击"添加文本框"按钮时，就会动态地在表单中添加一个新的文本框，每个文本框都有一个唯一的名称和占位符。这种表单可以用于收集可变数量的文本输入，例如多个联系人姓名、多个项目任务等。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云前端开发服务：https://cloud.tencent.com/product/fe
- 腾讯云云原生服务：https://cloud.tencent.com/product/tke
- 腾讯云数据库服务：https://cloud.tencent.com/product/cdb
- 腾讯云服务器运维服务：https://cloud.tencent.com/product/cvm
- 腾讯云音视频处理服务：https://cloud.tencent.com/product/mps
- 腾讯云人工智能服务：https://cloud.tencent.com/product/ai
- 腾讯云物联网服务：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动开发服务：https://cloud.tencent.com/product/mob
- 腾讯云存储服务：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务：https://cloud.tencent.com/product/baas
- 腾讯云元宇宙服务：https://cloud.tencent.com/product/ue
相关·内容
5回答
微信小程序人脸与身份证照片对比登录,后端做什么？
官方文档、小程序·云开发
微信小程序前端和后端分别要做些什么 ? 所有需要的东西有哪些 ? (请尽量详细点)
标题：人脸识别 - 智能图像服务 - 产品文档 - 帮助与文档 - 腾讯云
地址：https://cloud.tencent.com/document/product/641/12397
浏览 2448提问于2018-01-24
2回答
从页面HTML中获取动态元素？
javascript、c#、jquery、asp.net-mvc-4
我是新的前端开发，但有相当多的后端开发经验。我已经尝试了几种不同的方法来使用下面的javascript，这只是我尝试的一部分。
我有以下显示产品的代码。这是我的产品列表中的每个循环的n。
在页面的底部我有一个添加按钮。
我需要获得每个产品的数据Id来获得productId，价格来获得价格和数量输入字段的值，以便我可以将其发送到我的购物车。
我无法获得这些值，并尝试了一些不同的方法。
<div class="col-md-2">
<div class="panel panel-primary">
浏览 2提问于2015-04-29得票数 2
1回答
单位有一系列纸质表单，表单中的字段基本一致，但不同时期的排版有多种样式。
现在想通过印刷体识别和手写体识别做一个纸质转电子档的工具，拍照把纸质表单上手工填写的信息转录到网页中的电子表单中。
标题：OCR-通用印刷体识别 - 智能图像服务 - 产品文档 - 帮助与文档 - 腾讯云
地址：https://cloud.tencent.com/document/product/641/12428
浏览 462提问于2018-01-20
1回答
在电子商务购物车中使用$("form").serialize()
asp.net-mvc-2、jquery
我正在开发一个电子商务应用程序购物车。我有一个定价页面，其中显示了多个类别的产品和他们的价格列表。用户可以选择将多个产品添加到购物车(活动购物车显示在页面的右侧)。我正在尝试使用Ajax/jQuery将商品添加到购物车中。我有一个表单包装每个产品，其中包含多个隐藏字段，我想要传递给我的函数和控制器。你可以在下面的代码中看到所有这些：
<% foreach (var _category in Model) { %>
<% foreach (var _product in _category.Products)
{ %>
<tr
浏览 0提问于2010-12-08得票数 0
回答已采纳
3回答
为什么在使用JavaScript添加其他输入时，输入的输入值会消失？
javascript、html、dom
我有一个包含两个输入域的简单表单。一个表示产品名称，另一个表示价格。当我输入一个产品名称和一个产品价格，并点击一个按钮，为另一个产品和价格多添加了一个字段，另一个产品字段和价格字段被添加，但输入的输入值将被删除...
如何在不清除的情况下保留输入字段中的输入值？
这是我的JavaScript代码：
<script>
var total_products = 1;
function add_fields() {
var d = document.getElementById("products_services");
total_products++;
浏览 0提问于2015-04-15得票数 0
1回答
laravel表单不会执行submit按钮
javascript、php、jquery、laravel、laravel-blade
基本上，我的表单通过javascript添加到刀片中，然后我可以完成数据并点击保存按钮。
问题是“保存”按钮不工作。
代码
此函数将添加新的行和窗体来查看您在视频中看到的位置，我填写了输入并按了保存按钮。
var textFieldsCount = 0;
function addTextField(){
textFieldsCount++;
var textfieldhelper = '';
var my_row = $('<div class="row mt-20" id="textField-'
浏览 0提问于2018-08-07得票数 1
回答已采纳
5回答
使用Javascript删除动态创建的字段
javascript
当用户想要添加更多字段时，我有一个创建动态字段的函数：
function addNewField()
{
var newTextField = document.createElement('input');
newTextField.type = 'text';
newTextField.name = 'textInput';
var newDeleteButton = document.createElement('input');
newDeleteButton.type =
浏览 0提问于2018-09-04得票数 1
回答已采纳
2回答
输入字段“占位符”不工作/显示
javascript、html、css、node.js、express
我是一个新手前端开发，我很难理解为什么占位符不工作，我尝试使用标签标签，但它不会消失，因为我开始键入文本输入。我正在为HTML提供特快专递给heroku。下面是代码：
<!-- <label for="firstname">FirstName</label> -->
<input type="text" class="form-control" id="firstName" name="firstname" placeholder=&
浏览 4提问于2022-05-17得票数 -1
2回答
动态发票表单字段并将其张贴到数据库
javascript、php、jquery
我正在构建一个表单来创建发票。目前，它具有以下形式字段：
产品名称，质量。
我有一个“添加更多”按钮，它添加了上述表单字段的另一行。
然后，它作为数组提交到另一个php页面。我遇到的问题是将每个相关的表单字段相互匹配，因为当我将它保存在数据库中时，我需要正确的产品名称，QTY显然是在表中的同一行。只是不知道怎么匹配。
当前，我在表单字段页面上的代码是：
<html>
<head>
<title>Invoice Test</title>
<link rel="styl
浏览 3提问于2016-08-02得票数 0
回答已采纳
2回答
AJAX错误密码登录响应
javascript、jquery、ajax
我创建了一个简单的登录表单，它通过$.ajax jQuery请求将数据发送到一个jQuery。
我有两个问题-
如何将一对正确的登录详细信息设置到窗体上？
当记录错误的详细信息时，如何显示错误响应？
$("#my_form").submit(function (event) {
event.preventDefault(); //prevent default action
var post_url = $(this).attr("action"); //get form action url
var request
浏览 3提问于2017-11-24得票数 0
2回答
用于表单验证的Toastr
javascript、jquery、html、toastr
我正在尝试用Toastr替换javascript警报。我已经成功地链接了css和脚本。例如:如果文本框为空，将弹出一个Toastr，显示“请输入您的ID”。我是新手，谢谢！ HTML表单 <form action="#" method="POST" role="form" onsubmit= "required()" autocomplete="off" name="loginform">
<input type="text" class="form-c
浏览 33提问于2020-01-29得票数 0
1回答
Jquery函数与console.log没有结合使用
javascript、jquery、forms
我试图检查是否提交了表单，如果提交了表单，我希望在控制台中记录一个值，以便进行测试。
但是控制台里没有任何记录，我找不到我的问题。
代码：
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale
浏览 2提问于2017-04-25得票数 2
回答已采纳
1回答
使用按钮动态添加项的联系人窗体
javascript、php、jquery、html、forms
该表单，除了通常名称，电话，电子邮件字段等。我希望它有一个下拉和一些产品和一个文本框的quantity.The点是我希望用户能够添加更多的产品(下拉和文本框的数量)与按钮。
我用一些Jquery脚本成功地做到了这一点，但是当我用php发送电子邮件时，我添加的产品不在已经发送的电子邮件上。
以下是html：
<!DOCTYPE html>
<html >
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<m
浏览 0提问于2016-12-05得票数 0
回答已采纳
4回答
当添加新表单输入失败时，增量name属性
javascript、jquery
表单中有一个添加按钮，用于添加表单输入。在新表单输入时，我尝试增加属性name，例如name="description-1"、name="description-2"等。然而，所有新输入都具有相同的name="description-1"。我错过了什么？
var dataList = $('.products');
var jsonOptions = [{
"product": "11111",
"description": "description 1"
浏览 5提问于2017-02-22得票数 0
回答已采纳
2回答
电子邮件表单交互性
javascript、jquery、jquery-selectors、jquery-validate
我是一个网站开发的学生，我需要一些帮助。我有下面的代码；我如何使它只在表单提交而不是文本字段被单击时工作。我还想让它在.thanks分区中获取并插入文本字段的值。请帮我学习。
<script type="text/javascript">
$(document).ready(function(){
$(".quote").click(function(){
$(this).fadeOut(5000);
$(".thanks").fadeIn(6000);
var name = $("#name&
浏览 0提问于2011-03-31得票数 0
回答已采纳
1回答
如何使用jquery在spring中添加textbox
jquery、spring-mvc
Spring MVC
我做了以下代码，在spring MVC表单中添加文本框。我已经使用jquery在spring表单中动态添加了文本框。但是，当我尝试添加spring文本框时，此代码不起作用。
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page session="false"%>
<%@ taglib prefix="form" uri="http://www.springframework.org
浏览 0提问于2012-12-03得票数 1
回答已采纳
1回答
html输入表单写入csv
javascript、html、csv
我正在尝试使用javascript将html表单数据写入.csv文件。这是一个本地文件，所以我不能使用php。我是javascript的新手。
html：
<form action="" method="get" accept-charset="utf-8">
<input type="text" name="id">
<input type="text" name="name">
<button class="submit-btn&
浏览 6提问于2017-03-23得票数 1
2回答
如何用css格式化输入框中的文本
html、css
我试图在访问者键入任何文本之前更改输入框中占位符文本的字体颜色。
下面是我的例子
请参阅页面底部的文本框。我认为它现在使用的是用户代理样式表，这意味着表单元素没有创建样式？
我不确定我需要用CSS针对哪个元素。我要说的是：
form input[type=text] {
width: 300px;
margin-bottom: 7px;
font-size: 20px;
border: 0;
padding: 5px 7px;
background-color: #FF2950;
color: #fff;
}
浏览 0提问于2013-11-30得票数 0
回答已采纳
2回答
Jquery UI datepicker在动态字段中不起作用
jquery、datepicker
我正在添加动态input字段，但是datepicker不能在动态生成的字段中工作。
$(document).ready(function() {
$('#text').datepicker();
})
function addmore() {
var html = '<div class="form-group"><input type="text" placeholder="text" id="text"><button type="button"
浏览 1提问于2017-01-13得票数 1
1回答
使用jquery添加多个文本字段
javascript、jquery、html、css
我想要创建一个表单来插入课程ID和学分，当用户单击add两个文本字段时，我尝试添加两个输入框，但是当我单击add只显示一个输入框时。
提前谢谢..。
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery.js"></script>
<script
浏览 4提问于2016-04-05得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
