选中复选框时保存行值答案

【问题标题】：save row value when I select the checkbox选中复选框时保存行值
【发布时间】：2021-12-31 21:21:53
【问题描述】：

我很抱歉我的英语不好，我希望我能更好地解释自己。

Json 文件：通过此代码调用查看文件内容：

<? php
$ login = 'XL8T7924H9G9U1M99GTSVV9BHC2KYRFL';
$ password = '';
$ url = 'https://www.website.com/api/products?&output_format=JSON&display=full';
$ ch = curl_init ();
curl_setopt ($ ch, CURLOPT_URL, $ url);
curl_setopt ($ ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt ($ ch, CURLOPT_HTTPAUTH, CURLAUTH_BASIC);
curl_setopt ($ ch, CURLOPT_USERPWD, "$ login: $ password");
$ result = curl_exec ($ ch);
curl_close ($ ch);
$ json = json_decode ($ result, true);
/ echo ($ result);
?>

结果显示在此代码的数据表中

<form action = "" method = "post">
<table id = "example" class = "table table-striped table-bordered zero-configuration">
<thead>
<tr>
<th class = "th-sm"> # </th>
<th class = "th-sm"> Name </th>
<th class = "th-sm"> Description </th>
<th class = "th-sm"> Short Description </th>
<th class = "th-sm"> Image </th>
<th class = "th-sm"> Activate </th>
</tr>
</thead>
<tbody>
<div class = "form-group" style = "text-align: -webkit-center;">
<div class = "form-check form-check-inline">
<? php
foreach ($ json ['products'] as $ data)
{
echo "<tr>";
echo "<td>". $ data ['id']. "</td>";
echo "<td>". $ data ['name']. "</td>";
echo "<td>". $ data ['description']. "</td>";
echo "<td>". $ data ['description_short']. "</td>";
echo "<td>". '<img src = "http://www.website.com/'.$data [" id_default_image "] .'- home_default /'.$ data [" link_rewrite "].'. jpg" class = "img-thumbnail "width =" 120 "height =" auto "/> ';
echo "<td> <input type = 'checkbox' name = 'checkbox' value = '1'> </td>";
echo "</tr>";
}?>
</tbody>
</table>
<input type = "submit" name = "submitp" id = "submitp" value = "submit">
</form>

通过复选框并提交我可以将信息保存在 txt 文件中这是代码

<? php
if (isset ($ _ POST ['submitp'])) {
$ id = "product id:". $ _ POST ['id']. "";
$ name = "product name:". $ _ POST ['name']. "";
$ description = "product description:". $ _ POST ['description']. "";
$ description_short = "short product description:". $ _ POST ['description_short']. "";
$ image = "product image:". $ _ POST ['image']. "";
$ file = fopen ("file.txt", "w +");
fwrite ($ file, $ id);
fwrite ($ file, $ name);
fwrite ($ file, $ description);
fwrite ($ file, $ short_description);
fwrite ($ file, $ image);
fclose ($ file);
}
?>

我知道我错了，但我不知道如何保存整个选定的行。

您想要实现的目标：通过复选框保存选定的行及其 id、名称、描述和简短描述

错误：无

它保存的内容：只有复选框的内容

我希望我已经很好地解释了自己，并感谢您的帮助

【问题讨论】：

PHP 代码会触发大量语法错误。您尝试过什么解决方法？
这些空格，比wordpress源更糟糕：D "w +"，$ _ POST ['description']，删除所有这些空格

标签： php jquery html-table

【解决方案1】：

只有表单域被提交到服务器。没有字段的表格单元格不会在提交时发送

当您选中该框时，您可以使用 JavaScript 填充一组隐藏字段，（见下文）

您也可以使用 AJAX

您有复选框，要保存多行吗？如果没有，请改用收音机

改变

   echo "<td>". $data ['id']. "</td>";
   echo "<td>". $data ['name']. "</td>";
   echo "<td>". $data ['description']. "</td>";
   echo "<td>". $data ['description_short']. "</td>";

到

   echo "<td data-key=\"id\">". $data ['id']. "</td>";
   echo "<td data-key=\"name\">". $data ['name']. "</td>";
   echo "<td data-key=\"description\">". $data ['description']. "</td>";
   echo "<td data-key=\"description_short\">". $data ['description_short']. "</td>";
   echo "<td data-key=\"image\">". '<img src = "http://www.website.com/'.$data [" id_default_image "] .'- home_default /'.$ data [" link_rewrite "].'. jpg" class = "img-thumbnail "width =" 120 "height =" auto "/> ';

然后使用

$(function() {
  $("form").on("submit", function(e) {
    e.preventDefault(); // stop submission
    let details = $('input[name="checkbox"]:checked')
      .closest("tr") // parent row
      .find("td[data-key]") // only the ones with a key attribute
      .map(function() {
        return {
          [this.dataset.key]: this.textContent.trim() || $(this).find("img").attr("src")
        }
      })
      .get();
    console.log(details);
    if (details) {
      $.post("https://plungjan.name/SO/phponerow/save.php", JSON.stringify(details), function(data) {
        console.log("Details saved", data)
      })
    }
  })
})

$(function() {
  $("form").on("submit", function(e) {
    e.preventDefault(); // stop submission
    let details = $('input[name="checkbox"]:checked')
      .closest("tr") // parent row
      .find("td[data-key]") // only the ones with a key attribute
      .map(function() {
        return {
          [this.dataset.key]: this.textContent.trim() || $(this).find("img").attr("src")
        }
      })
      .get();
    console.log(details);
    if (details) {
      $.post("https://plungjan.name/SO/phponerow/save.php", JSON.stringify(details), function(data) {
        console.log("Details saved", data)
      })
    }
  })
})


My PHP is 

<?php 

header("Access-Control-Allow-Origin: *");
// $data = json_decode(file_get_contents('php://input'), true);

$data = file_get_contents('php://input');
echo $data;
?>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form>
  <table>
    <tbody>
      <tr>
        <td data-key="id">ID 1</td>
        <td data-key="name">Name 1</td>
        <td data-key="description">Description 1 </td>
        <td data-key="description_short">Short 1</td>
        <td data-key="image"><img src="http://www.website.com/id_default_image/home_default/link_rewrite1.jpg" class="img-thumbnail" width="120" height="auto" />
          <td><input type="checkbox" name="checkbox" /></td>
      </tr>
      <tr>
        <td data-key="id">ID 2</td>
        <td data-key="name">Name 2</td>
        <td data-key="description">Description 2 </td>
        <td data-key="description_short">Short 2</td>
        <td data-key="image"><img src="http://www.website.com/id_default_image/home_default/link_rewrite2.jpg" class="img-thumbnail" width="120" height="auto" />
          <td><input type="checkbox" name="checkbox" /></td>
      </tr>
      <tr>
        <td data-key="id">ID 3</td>
        <td data-key="name">Name 3</td>
        <td data-key="description">Description 3 </td>
        <td data-key="description_short">Short 3</td>
        <td data-key="image"><img src="http://www.website.com/id_default_image/home_default/link_rewrite3.jpg" class="img-thumbnail" width="120" height="auto" />
          <td><input type="checkbox" name="checkbox" /></td>
      </tr>
    </tbody>
  </table>
  <input type="submit" />
</form>

对一个复选框使用隐藏字段（与上面相同的数据属性）：

<form>
   <input type="hidden" name="id">
   <input type="hidden" name="name">
   <input type="hidden" name="description">
   <input type="hidden" name="description_short">
   <input type="hidden" name="image" />

使用

$(function() {
  $("form").on("submit",function(e) {
    const form = this; // save the form
    $('input[name="checkbox"]:checked')
      .closest("tr") / parent row
      .find("td[key]") // only the ones with a key attribute
      .each(function() {
        form[key].value = this.textContent || $(this).find(img).attr("src");
      })    
  })
})

【讨论】：

感谢您的友好回复，一旦在我的 txt 文件上选中复选框，我就无法保存整行信息，我使用了这种语法 $ (function () { $ ("form"). on ("submitp", function (e) { e.preventDefault (); let details = $ ('input [name = "checkbox"]: checked') .closest ("tr") .find ("td [key]" ) .map (function () {return {[this.dataset.key]: this.textContent}) .get (); $ .post ("MySaveUrl.php", details, function () {alert ("已保存详细信息" );}) }) }) }); MySaveUrl.php 文件包含第 3 点中的信息
很遗憾，我糟糕的英语和谷歌翻译对我没有多大帮助，她可以用 anydesk 连接到我的电脑吗？
谢谢，我必须将所有内容保存在 txt 文件或 json 文件中
@Luigi 我已经用一个工作示例更新了答案
好的，你一直很友善地致力于解决我的问题，但我不明白为什么如果我选择 id 为 5 的产品，例如，我只看到 id 为 10 的产品，它由我决定，我会通过电子邮件将我的文件发送给您

【解决方案2】：

当您提交时，它只提交inputs（以及一些其他输入类型，例如select、textarea）。

<td>123</td> 不会被提交。

您可以添加隐藏输入，在构建表的同时构建和填充，然后也会提交，例如：

<td>123<input type='hidden' name='id[0]' value='123'></td>

您需要为name=id[0] 使用正确的格式，以确保 php 选择不同值的所有行；有不同的方法可以做到这一点。

这个问题/答案的基本部分是包含一个隐藏的输入。

【讨论】：

抱歉没看懂