I have a form that I use JavaScript to set the value of a hidden INPUT field which is the text of the OPTION selected. The $_POST captures the value of the OPTION but not the value of the hidden INPUT. The hidden INPUT is being used to pass the OPTION text so it is available in the $_POST array.

This is the section of JavaScript used to get the value and text of the selected OPTION

    var sele = document.getElementById('building_type');
    var seleVal = sele.options[sele.selectedIndex].value;
    var seleTxt = sele.options[sele.selectedIndex].text;

This is where I set the value of the INPUT field with an ID of "other_hidden_text" in the same JavaScript.

    document.getElementById("other_hidden_text").value = seleTxt;

My problem is $_POST['other_hidden_text'] is empty. Any ideas why?

I have a form that I use JavaScript to set the value of a hidden INPUT field which is the text of the OPTION selected. The $_POST captures the value of the OPTION but not the value of the hidden INPUT. The hidden INPUT is being used to pass the OPTION text so it is available in the $_POST array.

This is the section of JavaScript used to get the value and text of the selected OPTION

    var sele = document.getElementById('building_type');
    var seleVal = sele.options[sele.selectedIndex].value;
    var seleTxt = sele.options[sele.selectedIndex].text;

This is where I set the value of the INPUT field with an ID of "other_hidden_text" in the same JavaScript.

    document.getElementById("other_hidden_text").value = seleTxt;

My problem is $_POST['other_hidden_text'] is empty. Any ideas why?

• javascript
• php
• html
• post

• 2 how is this script invoked? – Arun P Johny Commented Oct 15, 2014 at 3:28
• 7 Post the HTML. It's probably something like your hidden <INPUT> is not within the <form> tags. – user1864610 Commented Oct 15, 2014 at 3:28
• @MikeW: That, or the javascript bit is not getting invoked, and the hidden input is left to its default value. Set a different default value to the hidden input with <input ... value="JS_DIDNT_RUN"> to disambiguate the two cases (and in case of the latter, follow up on Arun's question on "how is this script invoked"). – Amadan Commented Oct 15, 2014 at 3:36
• Possible duplicate: stackoverflow./questions/871858/… – quik_silv Commented Oct 15, 2014 at 3:49
• The hidden INPUT is in a <DIV> </DIV> block that starts with display:none. The JavaScript sets display:block based on the OPTION's value. But I have several OPTIONS with the same value and different text. So in order to determine which building type is selected I need the OPTION's text. The additional INPUT and SELECT tags work fine. All are within the FORM tags. – user3152018 Commented Oct 15, 2014 at 4:16

3 Answers 3

I also had this problem and is solved by removing disabled option from input.

<input type="hidden" name="first_name" value="png" disabled> // can not post to form

<input type="hidden" name="first_name" value="png">

If you want to use an input outside of the form, you need to specify the associated form.

<form id="myForm" action="/post" method="post">
</form>

<input type="hidden" name="hidden-item" value="hidden-value"    
  **form="myForm"** />

If you have the form attribute set, it will associate the input to the form. It is very useful also if you have multiple forms on a page and don't want all of the inputs inside of the single form.

Seems like the hidden input element is not part of a form element. In HTML if you want to use input elements, you need to include them in a form, and specify where to submit the data and use which method (POST or GET) in the attributes of your form.

 <form action="server_side_code.php" method="post">
     <input type="text" name="value1" />
     <input type="hidden" name="value2" /> <!-- OK -->
     <input type="submit" />
 </form>

 <input type="hidden" name="value3" /> <!-- Will not be sent to anywhere -->

Using proper tools you can check what data the browser would actually send to your server side code (for example your PHP file where you are searching for values in $_POST). for example:

• In Firefox open Tools > Web developer > Network (or press Ctr + Shift + Q)
• In Chrome open More tools > Developer tools (Or press Ctrl + Shift + I) and select Network tab.

(Other browsers might provide such tools, but I don't have them installed now to introduce how to open their developer tools).

Then after submitting the form, a new line in the list of network calls would appear. Click on it and see the parameters sent to server side code. Check if your hidden field value is there.

If you could see the hidden field value in there, then the problem is that your JavaScript is not actually updating the value of this hidden input. Maybe it is not being triggered.