HTML表单字段已设置但为空

Question

I have a normal HTML form which is submitted via POST. The submit works and also sends data to the receiver page. What confuses me the most, is, that the save-button and the hidden input (shop_id) are sent but not the selected options from the drop down.

The selects are in the post, but the values are empty. The post looks like this:

save:Speichern
data[58]:
data[60]:
data[61]:
shop_id:5

Does anyone know how this can happen?

 <form action="article.mapping.html" method="post"> <table class="table table-bordered table-hover" style="table-layout: fixed; min-width: 1871px;"> <colgroup> <col style="width: 268px;"> <col style="width: 267px;"> <col style="width: 266px;"> <col style="width: 267px;"> <col style="width: 804px;"> </colgroup> <thead> <tr class="size-row" style="height: 51.5px;"> <th class="floatThead-col" style="height: 51.5px;"></th> <th class="floatThead-col" style="height: 51.5px;"></th> <th class="floatThead-col" style="height: 51.5px;"></th> <th class="floatThead-col" style="height: 51.5px;"></th> <th class="floatThead-col" style="height: 51.5px;"></th> </tr> </thead> <tbody> <tr> <td colspan="5" class="text-center bg-info"><strong>Beck's</strong></td> </tr> <tr> <td>Beck's</td> <td>Gold</td> <td>24</td> <td>0.33</td> <td> <select name="data[58]" class="form-control" data-live-search="true" data-actions-box="true" title="Bitte wählen..."> <option value="">Bitte wählen...</option> <option value="">Becks Alkoholfrei 24x0.33l</option> <option value="">Becks Sixpack 24x0.33l</option> <option selected="selected" value="">Beck's Gold Sixpack 24x0.33l</option> <option value="">Beck's Green Lemon Sixpack 24x0.33l</option> <option value="">Beck's Ice 24x0.33l</option> <option value="">Beck's 24x0.33l</option> <option value="">Beck's Gold 24x0.33l</option> <option value="">Beck`s Green Lemon 24x0.33l</option> <option value="">Becks Red Ale 4-Pack 24x0.33l</option> </select> </td> </tr> <tr> <td>Beck's</td> <td>Green Lemon</td> <td>24</td> <td>0.33</td> <td> <select name="data[60]" class="form-control" data-live-search="true" data-actions-box="true" title="Bitte wählen..."> <option value="">Bitte wählen...</option> <option value="">Becks Alkoholfrei 24x0.33l</option> <option value="">Becks Sixpack 24x0.33l</option> <option value="">Beck's Gold Sixpack 24x0.33l</option> <option selected="selected" value="">Beck's Green Lemon Sixpack 24x0.33l</option> <option value="">Beck's Ice 24x0.33l</option> <option value="">Beck's 24x0.33l</option> <option value="">Beck's Gold 24x0.33l</option> <option value="">Beck`s Green Lemon 24x0.33l</option> <option value="">Becks Red Ale 4-Pack 24x0.33l</option> </select> </td> </tr> <tr> <td>Beck's</td> <td>Ice</td> <td>24</td> <td>0.33</td> <td> <select name="data[61]" class="form-control" data-live-search="true" data-actions-box="true" title="Bitte wählen..."> <option value="">Bitte wählen...</option> <option value="">Becks Alkoholfrei 24x0.33l</option> <option value="">Becks Sixpack 24x0.33l</option> <option value="">Beck's Gold Sixpack 24x0.33l</option> <option value="">Beck's Green Lemon Sixpack 24x0.33l</option> <option selected="selected" value="">Beck's Ice 24x0.33l</option> <option value="">Beck's 24x0.33l</option> <option value="">Beck's Gold 24x0.33l</option> <option value="">Beck`s Green Lemon 24x0.33l</option> <option value="">Becks Red Ale 4-Pack 24x0.33l</option> </select> </td> </tr> <tr> <td colspan="5"><input class="btn btn-success" type="submit" name="save" value="Speichern"></td> </tr> </tbody> </table> <input type="hidden" name="shop_id" value="5"> </form> 

Answer 1

The problem is that, although you provide the text to be displayed for the options, you don't provide the values of the options. The form is posted, but the values are simply empty because you set them to be empty.

An example from MDN :

<!-- The second value will be selected initially -->
<select name="select">
  <option value="value1">Value 1</option> 
  <option value="value2" selected>Value 2</option>
  <option value="value3">Value 3</option>
</select>

To solve your problem, also fill the value="" attributes with the corresponding option values.