具有多种形式的表格，只有一种形式正在工作答案

【问题标题】：Table with multiple form and just one form is working具有多种形式的表格，只有一种形式正在工作
【发布时间】：2013-06-03 21:51:33
【问题描述】：

我使用 Jquery 来追加我的表格，当我追加它时，会添加一个新的 tbody 并且每个 tbody 都包含一个表单。问题是只有第一种形式有效，我不知道为什么。这是我的脚本：

<script type="text/javascript">
$(document).ready(function() {
     $("#tr_clone_add").click(function(){

    $('#listuser').append('<tbody><form:form action="${pageContext.request.contextPath}/insertMovement" method="post" commandName="movement"><tr>'+
'<td><form:input type="text"  path="nom_etabl"/></td>'+
'<td><form:input type="text" class="tcal" readonly="true" path="date_fin"/></td><td><input type="submit" value="" class="button round blue image-right ic-right-arrow"></td></tr></form:form></tbody>');
     f_tcalInit();
     });
});

问题出在哪里？

【问题讨论】：

会发生什么？当你说它不起作用时，你是什么意思？有错误信息吗？页面只是坐在那里吗？它是否发布但缺少值？等等。
表单的动作必须将数据插入数据库，但是当我点击按钮时什么都没有发生
<form:form 和 <form:input 在我看来就像是服务器端脚本。你不能用javascript添加这样的伪标签。
这是带有 Razor 的 ASP.NET MVC 吗？还是这一切都应该在 Javascript 中发生在客户端？
那是带有spring mvc框架的java。我在服务器 tomcat 中运行应用程序。

标签： jquery html

【解决方案1】：

您正在添加伪标签（<form:form> 和<form:input>），这些伪标签通常由服务器解析并直接转换为有效的 HTML 到 DOM 树。浏览器无法处理它们，因此您的表单不起作用。

你有两个选择：

添加有效的 HTML 标记（<form> 和 <input> 而不是伪标签
使用 AJAX 调用来解析服务器上的标记并将生成的 HTML 添加到您的 DOM 树中。

您必须根据服务器从这些标签生成的内容来决定更适合您的内容。

【讨论】：

来吧，一个ajax调用只是为了生成表单标记？我不认为这是一个有效的建议。
我相信如果 <form:input> 标签在生成时为标签添加更多属性（例如，用于区分多个表单或标签的唯一 ID），这是一个有效的解决方案。
也许，但我会说这需要一些工作流优化，最坏的情况 - 将 id 打印到隐藏字段中，并通过字段的 id 使用 JS 将其捕获。不是说 ajax 调用没有有效的使用场景，我是说它必须是合理的。 ajax 调用会产生大量的连接开销。
第一个解决方案对我无效，因为每个请求都发送到 spring 控制器......我不知道通过 ajax 来做...... :(
我可以使用 AJAX 来追加表格吗？如果我这样做，它可以工作吗？ @GeraldSchneider

【解决方案2】：

您的表单 html 无效。请参阅here 了解正确的做法。

【讨论】：

为什么无效？ form:form 是一个弹簧标签。我只是复制第一个（写在jsp页面中的脚本之外）并过去到脚本中以获得类似的形式。
您正在通过 JavaScript 添加表单（阅读：客户端）。我假设您使用的格式在服务器端脚本解析的语法中有效，但对客户端浏览器无效。对不起，我对java或spring（我是php）都不熟悉，但是您可以确定通过客户端js添加时，这是行不通的。
替换和根据我在答案中提供的示例，使用有效的 HTML 标记。抱歉，没有具体说明，我无法理解您的标记意味着什么。
您不再使用 spring。 Spring是服务器端的。 Spring 完成工作，将生成的 html 和 js 返回到客户端浏览器并停止。客户端浏览器解析完 js 后，js 将表单节点添加到你的 DOM 中，然后无法弄清楚这些表单是什么意思。