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

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

“类型选择器结果”框是隐藏的，仅显示“添加dvd”、“添加书本”或“添加家具”中的一个必要分区

我的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>

据我所知，我没有禁用Div，所以它不是由以下原因造成的：

在类类型中\u选择器\u结果\u框Div您的文本框具有相同的ID。 每个元素必须具有唯一的ID，但可以具有相同的名称属性。 因此，当您提交第一个ID元素值时，它将被发布

从Div中删除add_值 为文本框指定唯一的ID。

---

您有非唯一的名称和ID。所以，在提交表单时，最后一个字段的值会覆盖其他同名字段。此外，for=add_值将始终触发以MB为单位的DVD大小输入。考虑使用独特的ID和名称。谢谢，这对我帮助很大，我现在解决了。谢谢你的帮助，你和@ Justinas帮助了我。

<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>

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