将复选框状态/值自动保存到数据库

Question

想象一个记录列表（从数据库中提取）显示在表格中。在表格的早期视图中，某些行已被选中或未选中，并且该状态会根据需要在每个记录行的开头显示为空或已填充的复选框。

我希望用户能够单击或取消单击这些复选框，并将修改后的状态自动保存在后台，而无需单击其他提交按钮，但到目前为止我还没有找到一个明确的例子我认为使用 javascript 应该相当简单。

我是 Javascript 的新手，还没有弄清楚在将控件的属性传递给脚本时如何利用这些属性。我创建了一个代码 sn-p 来显示问题的基本原理。

function toggle_select(id) {
     // the id number that is passed is the primary key value for the database record
        alert('id '+id+' was clicked'); //this part works, but how to pass the new state to this script?
     // ?? can the function read if the checkbox has been checked or unchecked?
     // if so, then run a background process (ie. php script?) to update that record to the new checked or unchecked state
     // ie. $sql="update recordtable set is_selected='YES/NO' where rec_ID=id limit 1";
  };

<table>
<tr><th colspan="2">SELECT REQUIRED RECORDS</th></tr>
<tr><td><input type="checkbox" name="is_selected" checked onclick="toggle_select(1)" /></td><td>Record 1</td></tr>
<tr><td><input type="checkbox" name="is_selected" onclick="toggle_select(2)" /></td><td>Record 2</td></tr>
<tr><td><input type="checkbox" name="is_selected" checked onclick="toggle_select(3)" /></td><td>Record 3</td></tr>
<tr><td><input type="checkbox" name="is_selected" checked onclick="toggle_select(4)" /></td><td>Record 4</td></tr>
<tr><td><input type="checkbox" name="is_selected" onclick="toggle_select(5)" /></td><td>Record 5</td></tr>
<tr><td><input type="checkbox" name="is_selected" onclick="toggle_select(6)" /></td><td>Record 6</td></tr>
</table>

底线：目标是单击复选框并繁荣，该记录的选中/未选中状态将保存到数据库中，而无需完整的表单提交/页面重新加载。

Answer 1

做到了！

这是有效的脚本（就像一个魅力！）

如果我像这样形成我的复选框输入...（比我想象的要简单得多！）

//when the page loads, the database is tapped and the existing YES/NO value of the selector field is echoed as either checked or (empty string) in the control as it is displayed.  The primary key for the record is used for the checkbox id
//so a checkbox starts out either like this (if the value in the field was YES,
<input type="checkbox" id="649" onclick="toggle_select(649)" checked />
// and like this if it was NO
<input type="checkbox" id="649" onclick="toggle_select(649)" />


<script> 
function  toggle_select(id) {
    var X = document.getElementById(id);
    if (X.checked == true) {
     X.value = "YES";
    } else {
    X.value = "NO";
    }
//var sql="update clients set calendar='" + X.value + "' where cli_ID='" + X.id + "' limit 1";
var who=X.id;
var chk=X.value
//alert("Joe is still debugging: (function incomplete/database record was not updated)\n"+ sql);
  $.ajax({
//this was the confusing part...did not know how to pass the data to the script
      url: 'new_js_saveselect.php',
      type: 'post',
      data: 'who='+who+'&chk='+chk,
      success: function(output) 
      {//alert('success, server says '+output);
      },
      error: function()
      {//alert('something went wrong, save failed');
      }
   });
}
</script>

哦，这里是 .php 脚本的内容

<?php
foreach($_POST as $fld=>$val) {$$fld=$val;}
$sql="update clients set selected='$chk' where cli_ID='$who' limit 1";
    $link=mysqli_connect("localhost", "user", "pw", "db") or die("Could not connect : " . mysqli_error($link));
    if(mysqli_query($link, $sql)) {echo "OK";} // everything is Ok, the data was inserted
    else {echo "error";} // error happened
mysqli_close($link);
?>

Answer 2

AJAX 是您完成此类任务所需要的，您可以通过以下两种方式之一来完成。

第一种方法最简单，将整个表单发送到服务器，并更新整个数据库行。

第二种方法有点难，但也更快。如果您可以跟踪哪个复选框是哪个复选框，那么只需将更改的内容发送到服务器，以及它是打开还是关闭，从那里更新相应的单元格。

您可以了解如何执行 AJAX 部分 Here。这很简单。

Answer 3

你可以有类似的东西：http://jsfiddle.net/eLcjj12s/3/

function toggle_select(id) {
    var url = "http://somewhere.com/save.php?save_id="+id
    $.ajax({
        url: url
    }).done(function() {
        //Work done
        //Do something you like
    });     


  };

还有一个用于在somewhere.com/save.php中进行数据库调用和存储的PHP文件

喜欢：

<?php 
$id = $_GET["id"];
$sql = "UPDATE `id-table` SET `id` = '$id' ....."

//something like that

?>