Passing POST Data to PHP via JS fails

Question

First time I've added something huge, mixing JS, PHP, THREE and lot of other stuff. This is what I've tried.

When somebody clicks on the THREE.js scene onto a human body, selects parts of the human body and javascript then adds this to a from which I want to save the selected things into database using PHP / MySQL.

The THREE.js scene works, I can select / unselect things and the generated dynamic HTML Output works to. For example I get a form generated like this:

<canvas width="1680" height="949"></canvas>
<div id="Description">Will be added to database:</div>
<form id="BodyParts" method="POST" action="index.php?s=cinput">
    <input type="checkbox" id="leg_right" name="leg_right" disabled="" value="leg_right">
    <div id="leg_right_Description">Rechtes Bein</div>
    <input type="checkbox" id="leg_left" name="leg_left" disabled="" value="leg_left">
    <div id="leg_left_Description">Linkes Bein</div>
    <input type="checkbox" id="torso_top" name="torso_top" disabled="" value="torso_top">
    <div id="torso_top_Description">Obertorso</div>
    <input type="submit" value="Speichern" id="Submit">
</form>

So, after clicking onto the submit Button I am just using var_dump($_POST); on my receiving cinput.php file. But it gives out an empty array. However when trying to reload the site Chrome tells me that some data has been sent and I need to verify it again. You know what I mean. How the heck does this generated HTML Form above not work and not send POST data which I can use in PHP?

Answer 1

You've got the disabled attribute in all of your input fields. The mere PRESENCE of this attribute, even if its value is empty ( "" ) causes the field to get disabled. Disabled fields do NOT get submitted with the rest of the form. Since your entire form has nothing but disabled inputs, you submit nothing at all.

eg

<input type="text" value="foo" disabled="" />
<input type="text" value="bar" disabled="false" />
<input type="text" value="baz" disabled="disabled" />

all three of these inputs are disabled, even though by "human" logic, you'd expect only the last one to actually be disabled.

Your submit button is NOT disabled, but since there's no name attribute, it also doesn't submit anything to the form.