将数据从可编辑表单保存到数据库

Posted 2023-02-19

【中文标题】将数据从可编辑表单保存到数据库

【英文标题】：Save the data from editable form to database

【发布时间】：2016-03-24 22:54:57

【问题描述】：

我有一个可编辑的表单，允许我在单击特定字段时更改数据，但我无法将新数据保存在数据库中。（代码@fiddle）

html代码

<table>
  <tr>

    <td><span>text</span>
      <input type='text' name='text' value='text' class='toedit' readonly='readonly' />
    </td>

  </tr>

</table>

脚本

$("table").on("focus", "input, select", function() 
  $(this)
    .prop("readonly", false)
    .removeClass("toedit");
);

$("table").on("blur", "input, select", function() 
  $(this)
    .prop("readonly", true)
    .addClass("toedit")
    .siblings("span").text($(this).val());
);

$("table").on("click", "td", function() 
  $(this).children().focus();
);

编辑查询是这样的，但不知道如何从脚本中获取值并将其添加到下面的查询中

   $sql1="UPDATE `table_name` set name='".$text."' WHERE id='".$tableid."' ";
if(!mysqli_query($con,$sql1))
    
        die('Error:' . mysqli_error($con));
    

table_name的表结构是这样的

id  name
1    N1
2    N2

【问题讨论】：

您需要一种服务器端编程语言才能将某些内容保存到数据库中。

@caramba 更新了帖子，我有服务器端查询但不知道如何链接它们

也许你忘了添加 <form> 包装所有输入字段。也不要忘记在表单标签中指定动作和方法

【参考方案1】：

照做

HTML

  <form name="frm" method="POST" action="">
  <input type="text" name="id" id="id" value="" />
     <input type="text" name="name" id="name" value="" />
     <input type="submit" name="Update" id="update" value="Update" />
    </form>

jQuery

    $("#update").click(function(e) 
      e.preventDefault();
var name = $("#id").val(); 
      var name = $("#name").val(); 
      $.ajax(
        type:'POST',
        data:dataString,
        url:'update.php',
        success:function(data) 
        
      );
    );

update.php 页面

 <?php
      $name = $_POST['name'];
      $id= $_POST['id'];
      $sql1="UPDATE `table_name` set name='".$name."' WHERE id='".$id."' ";
    if(!mysqli_query($con,$sql1))
        
            die('Error:' . mysqli_error($con));
        
    ?>

【讨论】：

这是一个简单的表单，我可以通过它编辑数据，但我希望使表单可编辑，因为它显示在我的帖子的小提琴中

【参考方案2】：

2 种方法来做到这一点。 1) 创建一个服务器端脚本，它将存储所有表数据并通过 Ajax 调用该脚本。 2) 或者在表单提交时调用服务器端页面。

【讨论】：

这应该是评论而不是答案

【参考方案3】：

在您的 $("table").on 函数中，添加 AJAX 以更新您的 SQL。

这是一个以https://phpseason.wordpress.com/2013/02/15/ajax-add-retrieve-mysql-records-using-jquery-php/ 开头的 AJAX 教程。

使用 ajax 将更新后的文本和引用（唯一标识您的记录或行）传递给 PHP 脚本。在该 PHP 脚本中，更新您的 SQL 表。更新表格后，echo 向 AJAX 发送一条成功消息，这将向用户显示一条成功消息。

编辑

使用下面的代码；

$("table").on("blur", "input, select", function() 
  $(this)
    .prop("readonly", true)
    .addClass("toedit")
    .siblings("span").text($(this).val());
  var dat = $(this).val();
  $.ajax(
    type:"post",
    url:"process.php",
    data:"data="+dat+"&key="+uniquekey,
    success:function(result)
      if(result == "true")
        alert("data updated successfully");
      else
        alert("try again");
      
    
  );
);

在这里，uniquekey 必须是某个东西，它标识了您在表格中的行/条目。连同数据一起发送。 dat 是输入的更新文本。创建一个名为process.php 的文件，在该文件中，您可以使用$_POST["data"] 和$_POST["key"] 捕获内容。

使用键/引用$_POST["key"] 用$_POST["data"] 更新您的表。更新成功后，在你的 php 文件中回显true，否则回显其他内容。如果回显是true，那么您将收到类似data updated successfully 的警报，否则您将收到类似try again 的警报。

这里是小提琴：https://jsfiddle.net/blasteralfred/gss4vv6k/。

【讨论】：

您提供的链接基本上显示了获取数据并显示它们的表单，我希望输入字段本身应该是可编辑的形式，请看一下提供的小提琴，我希望表单是像这样