我在一个 HTML 页面中有几个表单,主要思想是这些表单提交彼此独立,并使用 AJAX 来防止整个页面重新加载。
这意味着搜索段是一个表单,在成功完成搜索(使用 AJAX)后,每个搜索结果将显示为包含另一个表单的卡片,其中包含单个出价字段。
奇怪的是,即使我尝试采用与搜索相同的技术来添加出价,每次提交出价时页面都会刷新,并且请求会成为 URL 的一部分:
这是我的 HTML:
<!-- Card display: cards are generated dynamically -->
<div id="card-container">
</div>
这是我针对此特定表单的 JavaScript(和 JQuery):
var bidReq;
$("#add-bid").submit(function(event) {
event.preventDefault();
console.log("entered form");
if (bidReq) {
bidReq.abort();
}
$form = $("this");
// Serialize data in the form
var serialized = $("form").serialize();
// Fire off the request to php/add_bid.php
bidReq = $.post (
"php/add_bid.php",
serialized,
disableAddBidButtons
);
});
function disableAddBidButtons(response) {
console.log("bye");
}
我怀疑这可能是因为 $_POST
是一个全局变量,目前仍然存储各个卡的信息,但我对此真的不太确定。完整的 HTML、CSS 和 JavaScript 可以在这里找到:https://codepen.io/anon/pen/RLXPaM
我还在 HTML 文件中包含了动态生成的卡片的 HTML 描述。
我了解到在单个 HTML 页面中包含多个表单并不是一个好的做法,因此如果您有更好的想法,也请告诉我!
预先感谢您的帮助!
最佳答案
您将事件监听器绑定(bind)到不存在的元素(因为您在搜索后稍后加载表单):
$("#add-bid").submit(function(event) {
此处,#add-bid
表单不存在。
您可以在添加元素后(即每次搜索后)添加和删除事件监听器。
更好的方法是将事件监听器绑定(bind)到父元素。
$("#card-container").on('submit', '#add-bid', function(event)
在这里,您将事件监听器绑定(bind)到确实存在的#card-container
。
关于javascript - 在单个 HTML 页面上提交表单的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46934069/