HTML hidden fields when shown doesn't post value

Question

Hello I've got a question, i have 3 hidden fields in a <form> . There is shown only one of them when i select a radio button. When i submit the form i didn't get the value and cant write it in the database, what am i doing wrong ?

the type_chooser_result_box is hidden and shows only one of the necassary divs (add_dvd, add_book or add_furniture)

my form in the 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>

and here is my javascript for hiding the type_chooser_result_box div and show it with an slide effect:

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

the result of my submit when i vardump() the $_POST is

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

im not disabling the divs as far i know so it isn't the result from this : Submit form fields inside display:none element

You have non-unique names and ID's. So when submitting form last field value overwrites every other fields with same name. Also your `for="add_value"` will always trigger input of `DVD Size in MB`. Consider using unique ID's and names — Justinas, Sep 17 '20 at 07:39

score 1 · Accepted Answer · answered Sep 17 '20 at 07:50

In class type_chooser_result_box Div your textboxes having same ID. Every element must have unique ID (but can have name attribute same).
So when ever you are submitting the first ID element value will be posted.

Remove add_value from Div
Assign unique ID to your textboxes.

HTML hidden fields when shown doesn't post value

1 Answers1