动态表单，提交时动态添加行为空
动态表单在提交时，如果动态添加的行为空，可能是由于以下几个原因造成的：
基础概念
动态表单是指允许用户在表单运行时添加或删除表单元素的表单。这种表单通常用于不确定数量的输入字段，如创建发票或填写调查问卷。
可能的原因
- JavaScript逻辑问题：动态添加行的JavaScript代码可能存在逻辑错误，导致新添加的行没有正确初始化。
- 验证机制缺失：表单提交前没有对动态添加的行进行验证，导致空行被提交。
- 事件绑定问题：动态添加的行可能没有绑定必要的事件监听器，如输入验证或提交前的检查。
解决方案
1. 检查JavaScript逻辑
确保动态添加行的代码正确无误。以下是一个简单的示例，展示如何使用JavaScript动态添加行并确保它们不为空：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dynamic Form</title>
<script>
function addRow() {
var table = document.getElementById("dataTable");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "<input type='text' name='field1'>";
cell2.innerHTML = "<input type='text' name='field2'>";
}
function validateForm() {
var table = document.getElementById("dataTable");
for (var i = 1; i < table.rows.length; i++) {
var inputs = table.rows[i].getElementsByTagName("input");
if (inputs[0].value == "" || inputs[1].value == "") {
alert("All fields must be filled out");
return false;
}
}
return true;
}
</script>
</head>
<body>
<form onsubmit="return validateForm()">
<table id="dataTable">
<tr>
<th>Field 1</th>
<th>Field 2</th>
</tr>
<tr>
<td><input type="text" name="field1"></td>
<td><input type="text" name="field2"></td>
</tr>
</table>
<input type="button" value="Add Row" onclick="addRow()">
<input type="submit" value="Submit">
</form>
</body>
</html>2. 添加验证机制
在上面的示例中，validateForm 函数会在表单提交前检查所有动态添加的行是否为空。如果任何行为空，它会阻止表单提交并显示警告。
3. 确保事件绑定
确保所有动态添加的元素都有适当的事件监听器。例如，如果你需要在用户输入时进行即时验证，可以使用 oninput 或 onchange 事件。
应用场景
动态表单广泛应用于需要用户自定义字段数量的场景，如：
- 订单处理：允许客户添加多个商品项。
- 调查问卷：允许受访者添加额外的评论或问题。
- 事件报名：允许参与者添加多个紧急联系人信息。
通过上述方法，可以有效避免动态表单提交时出现空行的问题，确保数据的完整性和准确性。
相关·内容
1回答
目前我正在做一个性别概述，你可以用一个简单的表格编辑性别，添加或删除它。现在已经可以添加和删除行了。目前，我正在努力将正确的web api数据显示为文本框中的值，并从表单中获取所有数据以将其发送回web api。我的问题是，在我对更新后的数据源的数据执行console.log操作后，新值仍然是空的。第三行是我动态添加的行。在包含3个条目的数组中，应该是"bezeichnung: 123“，而不是"bezeichnung：‘’”(第56行)。否则，只记录表单</
浏览 48提问于2021-09-29得票数 0
回答已采纳
2回答
$("form").submit(function(){ return false;如我所料，标记会触发提交如果我应该做一个提交，如果我想要创建一个图标按钮而不是纯文本，我应该使用什么？我使用的是引导+ jQuery
浏览 1提问于2015-07-24得票数 2
回答已采纳
与这个问题相关：，我有一个自定义sonata_type_collection的意外行为。我的问题是，有没有办法避免在
浏览 1提问于2017-06-14得票数 1
回答已采纳
由于某些原因，当我单击onClick处理程序时，它们会向我的url中添加一个空的查询参数。通过将event.preventDefault添加到事件处理程序中，我能够解决这个问题，但我希望更好地了解实际发生了什么，以及这是否是正确的解决方案。您将看到，我在所有这些代码中都添加了e.preventDefault()。如果没有这个修复，每当我触发其中一个函数时，我的url就会从更改为。我也使用反应路由器。
浏览 2提问于2015-05-27得票数 15
回答已采纳
2回答
我有一个包含以下内容的表单：echo"<textarea name='pb' required></textarea>";
echo"<button name='bt'>button1</button我只想在按下submit按钮时显示需要文本区的消息，但当我单击其他按钮时，此消息不会出现。
浏览 2提问于2017-04-11得票数 0
1回答
在互联网上启动网站之前，我想在我使用的网络表单上做一个验证测试。我已经知道如何通过W3C标记验证服务来验证HTML“静态网站”。是否可以通过提升文件在Webforms.aspx上执行相同的验证方法？
浏览 2提问于2015-02-04得票数 3
回答已采纳
2回答
我试图通过单击一个按钮来动态创建一个div，并将其添加到父名称"option_selection“中。但是div“消失了”(我不知道我还能说什么，因为说“不可见”可能有别的意思！)。
浏览 0提问于2012-04-01得票数 0
回答已采纳
我只是在Semantic UI上探索，我在一种形式中遇到了一个按钮点击事件，我看到了一个奇怪的行为。
<!
浏览 5提问于2017-03-26得票数 3
回答已采纳
2回答
提交后控件为空
、、
我的asp.net页面上有一个checkboxlist和textbox控件，它们是动态创建并添加到页面的。当我填充值并提交表单时，当表单到达服务器时，这些值是空的。有什么帮助吗？
浏览 0提问于2009-10-14得票数 0
我的开发部门正在争论当所有元素都填好后，用javascript自动提交表单。我们有一个带有两个select元素的表单，我们当前提交的这两个元素都是选中的。使用javascript自动提交表单有哪些好的正反两方面的论据？到目前为止，我们提出的唯一真正的论点是，如果表单是自动提交的，用户就不能很容易地更正它的选择:他必须返回到表单所在的前一页。但是，如果用户确实正确地填写了表单，可能会节省一些时间(可能只有半秒，但仍然如
浏览 0提问于2011-04-28得票数 1
回答已采纳
1回答
我在angular 7中使用了反应式表单来动态创建表单。我能够生成表单，并以适当的格式获得值，并能够正确提交。我的问题是，在续订表单时，我需要在UI中检索回这些值。简而言之，在续订表单时，我需要在UI中重新填充这些动态表单值。 我可以在点击“添加”按钮时动态添加表单。并且能够提交表单<
浏览 25提问于2019-10-07得票数 0
1回答
forms.MultipleChoiceField(required=False, widget=forms.SelectMultiple, label='MyList',help_text = "help")这似乎只发生在我动态
浏览 0提问于2011-11-10得票数 0
回答已采纳
我有一个视图(ViewOne)，其中有一些代码： var id = $('#ID').val();...public ViewResult myAction(string id) //get model fr
浏览 2提问于2016-09-08得票数 0
回答已采纳
我正在动态创建多个textbox，我想在提交表单时进行textbox验证(textbox不应该为空)。我无法捕获表单提交jquery函数中的textbox id或名称，有人可以帮助我如何使用JavaScript/jquery验证所有动态创建的textbox吗？我使用下面的代码动态生成多个文本框： type: "
浏览 0提问于2016-05-19得票数 3
3回答
我编写了一个将数据插入数据库的短代码--我得到了这段代码，但它无法工作，如果(Isset)甚至无法运行。 $idedit = mysqli_real_escape_string($conn, $_POST['id']);
$insert1 = mysqli_query($conn, "UPD
浏览 0提问于2019-04-04得票数 0
回答已采纳
我有一个表，通过添加+或-按钮来添加或删除要添加到表中的行，从而动态地添加行。+ -First Name | Last Name | Signature
当用户单击上面表单中的+时，它只会添加<
浏览 3提问于2014-12-07得票数 0
1回答
在通常的javascript表单submit中，所发生的情况是，当我完成post时，元素名称和值将在HTTP请求中自动发送到服务器，而无需收集每个元素名称和值。基于，我必须将视图中的每个ng模型收集到我的控制器中，我必须在我编写的提交函数中这样做。难道我不需要引用控制器中所有的ng模型就可以从视图中收集所有的东西吗？
为什么?在这种情况下，表单元素是从指令中动态提取的，当每个元素太多时，引用它们并不太实际。有什么建议吗？
浏览 5提问于2015-06-01得票数 0
带type="button"的button和type="submit"有区别吗？是否存在功能差异，或者只是为了便于代码阅读而使用的描述性名称？
浏览 3提问于2016-06-10得票数 32
我需要验证一个表单，该表单对动态创建的一组值使用隐藏输入。这些隐藏输入不存在于空表单中，但我希望确保在提交表单之前至少创建一个。 required: true });因此，没有真正的方法将规则添加</
浏览 2提问于2011-10-06得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
