'hidden INPUT value not available in $_POST

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?

javascriptphphtmlpost


Solution 1:[1]

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.

Solution 2:[2]

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.

Solution 3:[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">

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Nate
Solution 2 farzad
Solution 3 ParisaN

Related Questions