几个月前我确实找到了一个图书馆，但现在找不到了，我想要做的是让输入字段的两边都有 + 和 - 按钮，当输入将它的值更改为立即用更改更新数据库。
- 减号按钮会将输入字段减少 x(本例中为 1)
- 加号按钮会将输入字段增加 x(本例中为 1)
- 输入字段应该能够手动编辑而不是被“锁定”
我是手动完成的，如下所示:
$(function() {
$('.add').on('click', function() {
var $counter = $(this).closest('p').find('.counter');
var currentVal = parseInt($counter.val());
if (!isNaN(currentVal)) {
$counter.val(currentVal + 1);
}
});
$('.minus').on('click', function() {
var $counter = $(this).closest('p').find('.counter');
var currentVal = parseInt($counter.val());
if (!isNaN(currentVal) && currentVal > 0) {
$counter.val(currentVal - 1);
}
});
});#inputcounter {
line-height: 20px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<p>
<img src="http://i.imgur.com/olbGCog.png" width="20" height="20" id="minus" class="minus" />
<input type="text" value="5" id="inputcounter" class="counter" />
<img src="http://i.imgur.com/yZHYjWw.png" width="20" height="20" id="add" class="add" />
</p>
</body>更彻底的一个:http://jsfiddle.net/Ls3rhphr/
然后我如何使用上面的方法立即编辑数据库条目，以便在输入更改时更新数据库而不需要我单击更新/提交按钮？
最佳答案
正如@Dagon 在评论中建议的那样，让我们使用 Ajax .
我们可以使用一个函数，这样我们就不必在值更改时重写 Ajax 脚本。
function updateNumber(id, newvalue){
$.ajax({ /* START AJAX */
type: "POST", /* METHOD TO PASS DATA */
url: "update.php", /* PAGE WHERE TO PROCESS THE DATA; YOU CAN CHANGE THIS DIRECTORY DEPENDING ON WHERE YOU WANT TO SAVE YOUR UPDATE PAGE */
data: {"id": id, "newvalue": newvalue} /* DATA TO BE PROCESSED */
}); /* END OF AJAX */
}
我们还假设您为您的行设置了一个 ID(如您在评论中所述，您将 id 存储在 <tr> 中)。我们将添加一个新标签 - data-artid我们设置 id only 的地方:
<tr id="mem-1" data-artid="1">
我们可以在下面的脚本中调用上面的函数:
$(function() {
$('.add').on('click', function() {
var $counter = $(this).closest('p').find('.counter');
var currentVal = parseInt($counter.val());
var id = $(this).closest('tr').attr('data-artid'); /* GET THE ID */
if (!isNaN(currentVal)) {
$counter.val(currentVal + 1);
newvalue = currentVal + 1; /* STORE THE NEW VALUE */
updateNumber(id, newvalue); /* CALL THE updateNumber FUNCTION */
}
});
$('.minus').on('click', function() {
var $counter = $(this).closest('p').find('.counter');
var currentVal = parseInt($counter.val());
var id = $(this).closest('tr').attr('data-artid'); /* GET THE ID */
if (!isNaN(currentVal) && currentVal > 0) {
$counter.val(currentVal - 1);
newvalue = currentVal - 1; /* STORE THE NEW VALUE */
updateNumber(id, newvalue); /* CALL THE updateNumber FUNCTION */
}
});
});
现在，我们必须创建 update.php .我们将在此处更新您数据库中的数据。
$stmt = $con->prepare("UPDATE tableName SET inputcounter = ? WHERE id = ?"); /* JUST CHANGE THE TABLE NAME AND COLUMN NAME TO YOURS */
$stmt->bind_param("ii", $_POST["newvalue"], $_POST["id"]);
$stmt->execute();
$stmt->close();
关于javascript - 手动编辑输入字段以及使用 + 和 - 按钮时即时更改数据库条目，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36612191/