我真的不知道是否可以form
在另一个中添加一个form
<div class="container">
<form id="form" name="form" action="#">
<div>
<!-- Datos que se enviaran por medio del form principal -->
</div>
<div>
<!-- Resultado de ajax que se enviaran por medio del form principal -->
<form id="tck" method="POST">
<input type="text" name="ticket" maxlength="10">
<button type="submit">ticket</button>
</form>
</div>
</form>
</div>
但有必要这样做,因为它是设计的一部分,通过将其添加到form
主要的之外,input
搜索票将在设计之外div
有没有办法防止第二个form
都执行form
或者可以避免使用表单通过ajax发送数据,也就是不<form id="tck" method="post"></form>
取所有的信息从一个div
例子中取所有的信息<div id="remplazoporelformsegundario"></div>
来避免第二个从form
执行两者form
。
我的ajax代码
<script type="text/javascript">
$(function() { //document.ready es obsoleto desde jQuery 3
$('.dismiss').click(function () {
$('.response').fadeOut(500);
});
$('#tck').on('submit', function(e) {
e.preventDefault();
var data = $(this).serialize();
var request = $.ajax({
url: $(this).prop("action"),
method: $(this).prop('method'),
data: data,
dataType: "html"
});
request.done(function(response) {
console.log(response);
$('.response').html(response);
$(".response").fadeIn(200);
window.setTimeout(function () {
$('.response').fadeOut(500);
}, 6000);
});
request.fail(function(jqXHR, textStatus) {
alert('Hubo un error: ' + textStatus);
});
});
});
</script>
在HTML 标准文档中指定一个表单不能包含另一个表单(我的翻译,重要的部分是内容模型):
建议的解决方案很好,可以解决问题,但它们处理的是症状(
form
发送内部时发送外部),而不是错误的实际原因(不应该有form
另一个)。其他问题可能会在以后出现,因为问题的根源仍然存在。form
理想情况下,我会更改布局,以便在另一个元素中没有元素form
。您仍然form
可以使用 AJAX 发送内部内容(将被删除的内容)。例如,代码如下所示:然后使用 JavaScript,你会做这样的事情:
这样,当按下按钮时,只会发送该特定工单的数据,而不是像以前那样发送整个表单。此外,您将解决 HTML 无效的问题,因为不再有嵌套表单。
应用于您拥有的代码将是这样的:
尝试将提交类型的按钮更改为普通按钮:
它从 更改
button
为input
以防止表单被提交。然后将事件替换$('#tck').on('submit')
为.click()
. 将事件分配给button
:其余的将保持不变。这就是在不提交的情况下发送表单信息的方式。
完整代码:
对第二个表单而不是按钮类型提交,使其成为按钮类型按钮。
然后对该按钮进行单击事件,单击时只需提交所需的表单。您应该为按钮添加一个标识符。
例子: