更彻底的一个：http://jsfiddle.net/Ls3rhphr/

Question

几个月前我确实找到了一个库，但现在无法找到它，我想要做的目的是在任何一侧输入带+和 - 按钮的输入字段，当输入改变它的值时立即更新数据库。

减号按钮减少输入字段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/

如何使用上述内容立即编辑数据库条目，以便在输入更改时更新数据库，而无需单击更新/提交按钮？

Answer 1

正如@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 设置为：

<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();

在手动编辑输入字段时以及使用+和 - 按钮即时更改数据库条目

更彻底的一个：http://jsfiddle.net/Ls3rhphr/

1 个答案: