Question

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

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

我是Javascript的新手，还没有想出如何在将这些属性传递给脚本时点击控件的属性。我创建了一个代码片段来显示问题的基础知识。

＆＃13;

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";
  };

＆＃13;

<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>

＆＃13;

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

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

?>

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

3 个答案: