[英]Why is form submission outputting same data multiple times
<form id="book-entry-form">
<div class="form-group">
<input type="hidden" class="form-control" name="book-id" id="book-id" readonly>
<label for="book-name">Book Name</label>
<input type="text" class="form-control" name="book-name" id="book-name" required="true">
<label for="author-name">Author Name</label>
<input type="text" class="form-control" name="author-name" id="author-name" required="true">
<label for="select-category">Select Category</label>
<select class="form-control" name="cat-select" id="select-category">
</select>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">close</button>
<button type="submit" class="btn btn-primary" id="btn-submit">Submit</button>
</div>
</form>
纽扣。
<!-- button div for edit and delete and book issue -->
<div class="btn-group-vertical col-xs-4" role="group" aria-label="">
<button type="button" class="btn btn-light" data-toggle="modal" data-target="#newBookEntryFormModal"
id="EditButton">
<img src="./node_modules/bootstrap-icons/icons/pencil.svg" alt="" srcset="">
Edit</button>
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#OnDeleteModal"
id="DeleteButton">
<img src="./node_modules/bootstrap-icons/icons/trash.svg" alt="" srcset="">
Delete</button>
</div>
以上是图书录入/更新的表格。 这是提交的jquery。 我使用选定的表格行自动填充表单字段。
$('#EditButton').on('click', function () {
$('#BookInfoModal').modal('hide');
//book entry form autofill
$('#book-id').attr('type', 'text');
$('#book-id').val(rowEntries[0]);
$('#book-name').val(rowEntries[1]);
$('#author-name').val(rowEntries[2]);
$('#select-category').val(rowEntries[3]);
BookEntryUpdate($(this));
})
var BookEntryUpdate = function (obj) {
if (obj.is('#EditButton')) {
console.log("called by edit button");
$('#book-entry-form').submit(function (event) {
event.preventDefault();
var formInfo = $(this).serializeArray();
console.log(formInfo);
return false;
})
}
.....
}
当我在表格上单击任何行后输入提交时,它首先控制一次,但在选择任何其他行和提交时,它控制权在多次上记录相同的对象。 例子:
首次。
called by edit button index.js:146 (4) [{…}, {…}, {…}, {…}]
从第二次开始。
2index.js:140 called by edit button index.js:146 (4) [{…}, {…}, {…}, {…}] index.js:146 (4) [{…}, {…}, {…}, {…}] index.js:146 (4) [{…}, {…}, {…}, {…}]
如何解决这个问题? 我希望它只打印一次。
每次单击#EditButton
都会为#book-entry-form
上的submit
添加一个新的事件处理程序。 由于您只需要一个处理程序,只需将该代码BookEntryUpdate
之外:
$('#EditButton').on('click', function () {
$('#BookInfoModal').modal('hide');
//book entry form autofill
$('#book-id').attr('type', 'text');
$('#book-id').val(rowEntries[0]);
$('#book-name').val(rowEntries[1]);
$('#author-name').val(rowEntries[2]);
$('#select-category').val(rowEntries[3]);
BookEntryUpdate($(this));
});
$('#book-entry-form').on('submit', function (event) {
event.preventDefault();
var formInfo = $(this).serializeArray();
console.log(formInfo);
return false;
});
var BookEntryUpdate = function (obj) {
if (obj.is('#EditButton')) {
console.log("called by edit button");
// ...
}
// ...
}
在这里给出我自己的答案。 做了一些修复它的事情。 虽然它的原因是@Nick 所说的,他的解决方案是修复它的一种方法,但替代的解决方法是在继续当前提交之前取消绑定所有用于提交的事件处理程序。
$('#book-entry-form').off('submit').on('submit', function (event) {
event.preventDefault();
var formInfo = $(this).serializeArray();
console.log(formInfo);
// ...
})
这为我解决了这个问题。 希望它可以帮助其他人。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.