使用 jQuery selectable 将信息插入 MYSQL 表

Question

基本上，我想使用 jQuery selectable 来更新 MySQL 中的行。我认为这会很简单，但到目前为止我尝试过的一切都没有奏效。

这是我的 Javascript：

<script>
  $( function() {
    $( "#datepicker" ).datepicker({ dateFormat: "yy-mm-dd",
    altField: "#alternate",
      altFormat: "DD, d MM, yy" });
    $( "#selectable" ).selectable();
  });
  </script>

我的 PHP 代码：

if( isset($_POST['btn-book']) ) { 

$slot_date = date('Y-m-d',strtotime($_POST['slot_date']));
 $slot_line=$_POST['slot_line'];
 $reason=$_POST['reason'];
 $id=$_POST['id'];

 $sql="UPDATE appointments SET slot_date='$slot_date', slot_line='$slot_line', reason='$reason' WHERE id='$id'";
 $result=mysql_query($sql);

还有我的 HTML 表单：

Please select a line:      
<ol name="slot_line" id="selectable" >
  <li class="ui-widget-content">Line 1</li>
  <li class="ui-widget-content">Line 2</li>
  <li class="ui-widget-content">Line 3</li>
  <li class="ui-widget-content">Line 4</li>
  <li class="ui-widget-content">Line 5</li>
  <li class="ui-widget-content">Line 6</li>
  <li class="ui-widget-content">Line 7</li>
</ol>

我想要发生的只是当用户在我的 HTML 表单中选择一行并按下提交按钮时，我的 MySQL 表中的“slot_line”会更新。

Answer 1

<ol></ol> 不是输入字段。删除ol 的name 标签。

您可以做的是有一个隐藏的输入，您可以在其中存储所选slot line 的值。

<input type="hidden" name="slot_line" id="slot_line">

然后创建一个脚本来为你的隐藏输入赋值：

$(document).on("click", ".ui-widget-content", function(){

    var elem = $(this),
        slotitem = elem.text();

    $("#slot_line").val(slotitem);

});

---

对于@Fred -ii- 的调查，您也可以尝试使用 HTML5 的日期：

<input type="date" name="slot_date">

确保appointments 表中的slot_date 列属于date 数据类型。