显示的 HTML 隐藏字段不会发布值

Question

你好，我有个问题，我在一个CCD_ 1中有3个隐藏字段。当我选择单选按钮时，只显示其中一个。当我提交表单时，我没有得到值，也无法将其写入数据库，我做错了什么？

type_chooser_result_box被隐藏，并且只显示必要的div之一(add_dvd、add_book或add_furniture(

我的HTML表单：

<form method="post" action="#" id="addProduct">
<label for="NAME">SKU is added automaticaly: </label><br>
<input type="text" id="add_name" name="add_name" disabled><br>
<label for="NAME">add Name: </label><br>
<input type="text" id="add_name" name="add_name" required><br>
<label for="number">add Price: </label><br>
<input type="text" id="add_price" name="add_price" required><br>
<label for="type_chooser">Choose product type: </label>
<div id="type_chooser" onclick="hide_box()">
<label for="dvd">DVD</label>
<input type="radio" id="dvd" name="add_type" value="dvd">
<br>
<label for="book">Book</label>
<input type="radio" id="book" name="add_type" value="book">
<br>
<label for="furniture">Furniture</label>
<input type="radio" id="furniture" name="add_type" value="furniture">
<br>
</div>
<br/>
<div class="type_chooser_result_box" id="add_value">
<div id="add_dvd">
<label for="add_value">DVD Size in MB</label>
<input type="text" id="add_value" name="add_value"><br>
</div>
<div id="add_book">
<label for="add_value">Book weight in g</label>
<input type="text" id="add_value" name="add_value"><br>
</div>
<div id="add_furniture">
<label for="add_value">Height</label>
<input type="text" id="add_value" name="add_value"><br>
</div>
</div>
<br/>
<input type="submit" value="Submit" id="submit">
</form>

这是我的javascript，用于隐藏type_chooser_result_boxdiv并用幻灯片效果显示它：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".type_chooser_result_box").hide();
});
$("#dvd").click(function() {
if ($("#dvd").is(":checked")) {
//show the hidden div
$("#add_dvd").show("slide");
$(".type_chooser_result_box").show("slide");
$("#add_furniture").hide("slide");
$("#add_book").hide("slide");
}
});
$("#book").click(function() {
if ($("#book").is(":checked")) {
//show the hidden div
$("#add_book").show("slide");
$(".type_chooser_result_box").show("slide");
$("#add_dvd").hide("slide");
$("#add_furniture").hide("slide");
}
});
$("#furniture").click(function() {
if ($("#furniture").is(":checked")) {
//show the hidden div
$("#add_furniture").show("slide");
$(".type_chooser_result_box").show("slide");
$("#add_dvd").hide("slide");
$("#add_book").hide("slide");
}
});
</script>

当我vardump(($_POST为时，我的提交结果

array(4) { ["add_name"]=> string(4) "Harry Potter" ["add_price"]=> string(2) "9.99" ["add_type"]=> string(4) "book" ["add_value"]=> string(0) "" }

据我所知，我没有禁用div，所以这不是结果：提交display:none元素内的表单字段

Answer 1

在类type_chooser_result_boxdiv中，您的文本框具有相同的ID。每个元素都必须具有唯一的ID(但可以具有相同的名称属性(
因此，当您提交第一个ID元素值时，将进行过帐。

1. 从Div中删除add_value
2. 为您的文本框分配唯一ID