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

Question

想象一下表中显示的记录列表(从数据库中提取)。在表的早期 View 中，某些行已被选择或取消选择，并且该状态根据需要在每个记录行的开头显示为空或已填充的复选框。

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

我是 Javascript 新手，尚未弄清楚如何在将控件的属性传递给脚本时利用这些属性。我创建了一个代码片段来展示问题的基础知识。

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