I'm relatively new to html5 and I'm trying to put together a webpage using a datalist object. I populate my datalists from a database, an example is shown below:
<input type="text" list="eventList" autocomplete="off" id="searchEvents" name="searchEvents">
<option data-value="1" value="2016-06-02">2016-06-02</option>
<option data-value="2" value="2016-06-09">2016-06-09</option>
You shouldn't get your Primary Key from user submitted data. Better to calculate or auto generate that on the server-side based on the user-provided data.
Anyway, you can add hidden fields in your form using something like this:
<input type="hidden" name="hiddenvar" value="some secret" />
The form's submitted data goes to the script/url provided in the
action attribute of the form. On the server side, PHP gets the data in the var
Edit based on OP's comment:
You will still need to add the hidden element as above but you can do it with an element like this:
<input type="hidden" name="searchEventsID" value="" />
Leave it empty first and then have JS set the value to the corresponding
Note that both examples are for a
hidden element so the user won't see it. But it will be submitted to the server when the user submits it.
onchange attribute of the select
<input> tag to a JS function which will do the necessary. See the links above on how to do that. And maybe google for some tutorials. This SO answer has a similar "structure" but you'll need to figure out what you need to do. Specifically,
var hidden_val = document.getElementById('eventList').getAttribute('data-value'); document.getElementById('searchEventsID').value = hidden_val; // done in two lines for clarity but you can do it in one.