【发布时间】:2023-03-22 23:20:01
【问题描述】:
我有一个小问题。我的代码中有这个:
<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 创建并动态填充隐藏字段。但是没有更多的代码,也没什么好说的了。 -
为什么不通过类名选择它们或创建逗号分隔的输入隐藏变量