将 html5 数据列表的隐藏值发送到数据库

Question

我对 html5 比较陌生，我正在尝试使用数据列表对象组合网页。我从数据库中填充数据列表，示例如下：

我想要实现的是让用户在下拉框中看到日期列表，当他们单击一个按钮时 post 将关联的数据值编号发送到数据库（这是主要的钥匙）。问题是我如何获取要在 php 中使用的数据值以发送到数据库（我可以获取 javascript 中的值但我不想使用 javascript 连接到数据库，因为有人告诉我这不是好的做法）。首先十分感谢。马丁

<input type="text" list="eventList" autocomplete="off" id="searchEvents" name="searchEvents">
<datalist id="eventList">
    <option data-value="1" value="2016-06-02">2016-06-02</option>
    <option data-value="2" value="2016-06-09">2016-06-09</option>
</datalist>

Answer 1

您不应该从用户提交的数据中获取您的主键。最好根据用户提供的数据在服务器端计算或自动生成。

无论如何，您可以使用如下方式在表单中添加隐藏字段：

<input type="hidden" name="hiddenvar" value="some secret" />

您可以将其放在 HTML Form 中。当用户从下拉列表中选择一个选项时，您可以 JavaScript 将该元素插入 到表单中。

表单提交的数据转到表单的 action 属性中提供的 script/url。在服务器端，PHP 获取 var $_POST.

中的数据

根据 OP 的评论进行编辑：

您仍然需要像上面那样添加隐藏元素，但您可以使用这样的元素来完成：

<input type="hidden" name="searchEventsID" value="" />

先留空，然后让JS给对应的data-value属性赋值。

请注意，这两个示例都是针对 hidden 元素的，因此用户不会看到它。但是会在用户提交的时候提交给服务器。

编辑 2：

设置 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 与 "structure" 类似，但您需要弄清楚您需要做什么。具体来说，

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.

将 html5 数据列表的隐藏值发送到数据库

Sending hidden value of html5 datalist to database

html

php

database

html-datalist