如何制作与控件中的值一起提交的表单的副本
制作与控件中的值一起提交的表单的副本，可以通过以下步骤实现：
- HTML表单：首先，创建一个HTML表单，包含需要提交的控件（如输入框、复选框、下拉列表等）。确保每个控件都有一个唯一的name属性，以便在提交表单时能够获取到对应的值。
- JavaScript事件处理：使用JavaScript来处理表单的提交事件。可以通过给表单元素添加onsubmit事件来触发处理函数。在处理函数中，可以通过获取表单元素的值，并将其复制到一个隐藏的input元素中。
- 创建副本：在处理函数中，创建一个隐藏的input元素，并将其添加到表单中。将复制的值设置为隐藏input元素的value属性。
以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<title>制作与控件中的值一起提交的表单的副本</title>
</head>
<body>
<form id="myForm" onsubmit="submitForm(event)">
<label for="name">姓名:</label>
<input type="text" id="name" name="name">
<br>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email">
<br>
<input type="submit" value="提交">
</form>
<script>
function submitForm(event) {
event.preventDefault(); // 阻止表单默认提交行为
// 获取表单元素的值
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
// 创建隐藏的input元素
var copyInput = document.createElement("input");
copyInput.type = "hidden";
copyInput.name = "copy";
copyInput.value = name + " - " + email;
// 将隐藏input元素添加到表单中
document.getElementById("myForm").appendChild(copyInput);
// 提交表单
document.getElementById("myForm").submit();
}
</script>
</body>
</html>在上述示例中，当用户点击提交按钮时，会触发submitForm函数。该函数首先阻止表单的默认提交行为，然后获取name和email输入框的值。接下来，创建一个隐藏的input元素，并将复制的值设置为其value属性。最后，将隐藏input元素添加到表单中，并手动提交表单。
这样，当用户提交表单时，除了正常提交的控件值外，还会提交一个名为"copy"的隐藏字段，其值为name和email的组合。
注意：上述示例中的JavaScript代码是简单的示意，实际开发中可能需要根据具体需求进行适当的修改和优化。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云对象存储（COS）。
- 腾讯云云服务器（CVM）：提供可扩展的计算能力，用于部署和运行应用程序。详情请参考：腾讯云云服务器产品介绍
- 腾讯云对象存储（COS）：提供安全、稳定、低成本的云端存储服务，适用于存储和管理大规模的非结构化数据。详情请参考：腾讯云对象存储产品介绍
相关·内容
1回答
我有一个ASP.net网页表单供用户填写。我不想只保存控件的值，我想保存整个表单以及在控件中输入或选择的值。因此，结果将是一个带有用户选择和输入的.htm文件。谢谢你的帮忙
浏览 4提问于2016-08-17得票数 0
2回答
对于一个基本的HTML表单，我想将表单分成三个选项卡，每个选项卡都包含特定的字段，当提交表单时，我希望这三个表单中的所有数据都能提交。菜单导航栏中的javascript将通过调用每个div的show() & hide()方法来控制显示哪个选项卡。(使用jQuery)。现在我的问题是：
1)我希望能够提交整个表单<
浏览 3提问于2012-09-17得票数 14
回答已采纳
我有一组单选按钮，它们位于HTML表单中的其他控件之间。我不希望这些单选按钮的值与查询一起提交(我只是将这些单选按钮用于JavaScript内容)。通常，我可以使用其他控件(即复选框等)来完成此操作。因为它们没有"name“属性，所以它们不会被提交。但是，"name“属性是单选按钮具有”互斥“行为所必需的。我也不能将单选按钮移到表单之外，因为它
浏览 3提问于2010-08-24得票数 0
2回答
我有以下<input>表单元素：
<input id="serviceCode" name="serviceCode" type="text" placeholder="" class="form-control我是遗漏了什么，还是“禁用”了输入表单元素没有传递回服务器？
浏览 5提问于2016-05-12得票数 0
回答已采纳
2回答
更新：function preventFromBeingDoubleSubmitted() {
$('for
浏览 1提问于2019-04-04得票数 1
回答已采纳
我将sysout语句放在requestParameter之后，并显示空值。任何帮助都将不胜感激。很抱歉给你带来不便，我是新来的。
浏览 3提问于2014-10-07得票数 0
回答已采纳
第一页有一个带有两个选择框和一个提交按钮的表单。第二页有一个带有两个文本输入框和一个提交按钮的表单。提交第一页上的表单后，它将转到第二页，两个文本输入框将使用$_POST填充来自第一个表单的值。我的问题是，当我提交第二个表单(提交的第二个页面)时，表单的$_
浏览 3提问于2016-01-14得票数 0
回答已采纳
1回答
="orderedQuantity" value="OrderQuantity" /></form> 我需要将新输入的值传递给EditItem操作方法，因为我需要根据新输入的值相应地更新库存数量，如下所示 public async Task<IActionResult> EditItem(i
浏览 76提问于2021-11-02得票数 0
2回答
我有一个表单，其中传入了一些输入文本，我不希望在GET中包含所有字段；我希望避免空字段。因此，下面是一个具体的例子： <input type="text" name="field1"/>
浏览 0提问于2010-04-08得票数 3
回答已采纳
当我试图输入数据在我的玉形式，我得到错误信息，说它是空。有人能帮我找出问题所在吗？content然而，如果我使用curl --verbose -d 'header=abcd&body=1234' http://localhost:3000，它工作的很好，所以我相当肯定这是玉的部分，但我不知道有什么问题。我是nodejs的新手，所有这些都是:)预先谢谢。
浏览 4提问于2014-01-04得票数 0
回答已采纳
noneI有一个表单，用户可以在其中通过单击复选框来隐藏或显示字段。PostalAddressContainer").hide("fast"); }我的印象是，带有style="display:none“的字段不会回发。但是，当我提交表单时，客户端验证不会验证隐藏字段，这是我所期望的。
浏览 0提问于2014-03-20得票数 3
1回答
我从一个类实例填充表单字段(在pygtk中)，这个类实例包含属性和它们的值。提交表单后，我将使用新值更新此实例。谢谢
浏览 2提问于2011-06-10得票数 0
回答已采纳
我有主要类别和子类别的产品，当我选择任何主要类别，它显示了相关的子类别。但是当我发布表单时，它会发布最后一个子类别值，而不是选定的子类别值。Sub Category 3</option> </Select>
例如:当我选择子类别1时，它的张贴值为子类别
浏览 4提问于2013-11-03得票数 0
回答已采纳
2回答
我有一个表单，它包含多个输入字段。如果我没有为每个字段提供id或名称，该怎么办？该字段将使用某个默认名称提交还是根本不会提交。
这只是一个查询。不涉及任何代码。谢谢
浏览 4提问于2012-08-31得票数 0
回答已采纳
我的视图中有一个，并在其中嵌套了一些。我不希望用户编辑文本字段，所以我做到了:禁用了=> true。问题:如果我做了:禁用了=> true，文本字段值不会在params散列中传递，而如果是:readonly => true，则会以params散列的形式发送值。
这是意料之中吗？如果是，则文档中没有提到这一点。如果没有，那么我应该在GitHub中提交一个问题吗？
浏览 5提问于2015-07-21得票数 32
回答已采纳
我已经创建了一个表单，很少有字段作为“输入类型文本”，文本框中的值是从后端填充的。此表单是编辑页，用户将在其中单独编辑所需的字段。我使用提交类型按钮，其中enitre形式是提交到角分量。此外，我还需要跟踪以这种形式编辑的字段。 </div&
浏览 5提问于2020-03-12得票数 0
回答已采纳
>这在我的主dev box和服务器上都工作得很好。然而，目前我不得不在我的笔记本电脑上远程工作。我安装了与我的开发设置中完全相同的WAMPServer 2.1a版本，并且$_POST数组为空。如果我像这样声明该字段：我得到了预期的输出。
浏览 13提问于2011-06-15得票数 9
回答已采纳
我一直未能找到这个问题的答案。在使用NodeJS、Express和Express both解析器时--以及其他的平均堆栈--我遇到了隐藏字段和禁用字段的问题:在提交表单时，它们不会出现在req.body对象中。如果我理解正确的话，那么express的from解析器方面实际上是从另一个项目中提取的。无论如何，我还没有真正弄清楚为什么要删除这些字段，或者如何阻止这种情况发生。对于我自己和未来的谷歌人:这
浏览 0提问于2013-10-28得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
