如何通过表单通过 POST 传递 TD id

Posted 2023-05-09

【中文标题】如何通过表单通过 POST 传递 TD id

【英文标题】：How to pass TD id through POST via form

【发布时间】：2021-07-02 13:10:36

【问题描述】：

我有一个小问题。我的代码中有这个：

    <td id="def1s"></td>
    <td id="def1r"></td>
    <td id="def1g"></td>
    <td id="def1m"></td>

当我更改选择（下拉菜单）时，通过 AJAX 填充 id 的位置。

现在我想在我按下表单上的 Save Changes 按钮时将 id 传递给数据库。

我发现我不能通过 POST 传递 id 值，我也不能使用"name="。在通过 POST 更改选择到数据库后，如何才能发送给定的值？

编辑

到目前为止，感谢您的输入，我尝试了一些东西，但我想它有点复杂......

在 html 中我有这个：

<select class="form-control" id="weapon" name="weapon">
        <option value="<?= $general['weapongear']; ?>"><?= $general['weapongear']; ?></option>
    <?php foreach($gearweapons as $gearweapon): ?>
        <option value="<?= $gearweapon['ID']; ?>"><?= $gearweapon['gearname']; ?></option>
    <?php endforeach; ?>
</select>
<table class="table table-dark table-striped">
<thead>
  <tr>
    <th></th>
    <th>Siege</th>
    <th>Ranged</th>
    <th>Ground</th>
    <th>Mount</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>ATT</td>
    <td id="att1s"></td>
    <td id="att1r"></td>
    <td id="att1g"></td>
    <td id="att1m"></td>
  </tr>
  <tr>
    <td>DEF</td>
    <td id="def1s"></td>
    <td id="def1r"></td>
    <td id="def1g"></td>
    <td id="def1m"></td>
  </tr>
  <tr>
    <td>HP</td>
    <td id="hp1s"></td>
    <td id="hp1r"></td>
    <td id="hp1g"></td>
    <td id="hp1m"></td>
  </tr>
</tbody>
</table>

在选择更改时填充所有这些 id：

$("#weapon").change(function() 
    //get the selected value
    var valweapon = this.value;
    //make the ajax call
    $.ajax(
        url: '/ajax/gear_ajax.php',
        type: 'POST',
        data: field : 'ID', value: valweapon,
        success: function(data) 
          document.getElementById("att1s").innerText = data['atts'];
          document.getElementById("att1r").innerText = data['attr'];
          document.getElementById("att1g").innerText = data['attg'];
          document.getElementById("att1m").innerText = data['attm'];
          document.getElementById("def1s").innerText = data['defs'];
          document.getElementById("def1r").innerText = data['defr'];
          document.getElementById("def1g").innerText = data['defg'];
          document.getElementById("def1m").innerText = data['defm'];
          document.getElementById("hp1s").innerText = data['hps'];
          document.getElementById("hp1r").innerText = data['hpr'];
          document.getElementById("hp1g").innerText = data['hpg'];
          document.getElementById("hp1m").innerText = data['hpm'];
        
    );
);

结果如下所示：

当我点击提交按钮时，表中的所有值都应该更新到数据库中，无论有值还是 NULL

【问题讨论】：

使用 javascript，您不受<form> 标签的一般规则的约束。您可以遍历整个 DOM 并进行 GET/POST/等。使用您想要的任何逻辑请求。因此，当有人按下按钮时，您会使用一些逻辑收集东西并发送传统的 AJAX POST。如果您想创建 <form> 帖子，您也可以使用 HTML/JavaScript 创建并动态填充隐藏字段。但是没有更多的代码，也没什么好说的了。

为什么不通过类名选择它们或创建逗号分隔的输入隐藏变量

【参考方案1】：

有很多方法，但我给你一个最简单的。

当你改变选择（下拉）时，你需要传递选择框值加上IDS的逗号分隔字符串

您可以使用 json 格式并在 ajax 函数中将两者分开。因此，通过这种方式，将字符串分配给现有的表单隐藏值，当您提交表单时，您将获得所有 IDS