Jquery对话框表单没有正确地将字段内容发布到PHP文件

时间:2014-01-17 04:19:13

标签: javascript php jquery html datepicker

我的一个网页上有一个链接。

<div id="updateDay"><a href="#" id = "updateDiffDay">Update</a> a different day</div>

当用户单击updateDiffDay链接时,将打开一个jquery模式对话框,其中包含一个表单。表单有两个字段,一个是日期选择器,另一个是文本框。

<form id="updateDiffDayForm" method="post" action="updateDiffDay.php">
    <input class = "field" type="text" placeholder= "Select a date" id="datepicker">
    <input type="text" id="diffDayDailyMetric" class="field" placeholder="Enter weight" />
</form>

对话框上有两个按钮,更新和取消。当用户单击“更新”按钮时,表单应将用户在表单上输入的内容发布到updateDiffDay.php文件。

模态对话框的代码如下:

<script>
$(function() {
$( "#datepicker" ).datepicker({
  dateFormat: 'yy-mm-dd',
  changeMonth: true,
  changeYear: true,
yearRange: "-90:+0"
  });

$( "#dialog" ).dialog({
  autoOpen: false,
  width: 350,
  height: 250,
  modal: true,
  dialogClass: 'ui-dialog',
  draggable: false,
  resizable: false,
  buttons: {
        Update: function () {
    $('#updateDiffDayForm').submit();
        },
        Cancel: function () {
            $(this).dialog("close");
        }
    },

  show: {
    duration: 500
  },
  hide: {
    duration: 500
  }
});

$( "#updateDiffDay" ).click(function() {
  $( "#dialog" ).dialog( "open" );
});

});

updateDiffDay.php的代码如下:

<?php
$date = $_POST['datepicker'];
$metric = $_POST['diffDayDailyMetric'];
echo $date;
echo $metric;

在将表单中的字段发布到PHP文件之前,所有内容似乎都有效。问题是,当用户单击“更新”按钮时,表单上输入框的内容(即用户在日期选择器中选择的日期和在diffDayDailyMetric输入框中输入的值)将被忽略,并且日期选择器的默认日期,1970-01-01,发布到datepicker,没有任何内容发布到diffDayDailyMetric。

我已经尝试了很多并搜索了论坛但却无法完成这项工作。任何帮助将不胜感激。这是我第一次使用像这样的jquery。非常感谢帮助。感谢

1 个答案:

答案 0 :(得分:0)

以您的形式:

<form id="updateDiffDayForm" method="post" action="updateDiffDay.php">
    <input class = "field" type="text" placeholder= "Select a date" id="datepicker">
    <input type="text" id="diffDayDailyMetric" class="field" placeholder="Enter weight" />
</form>

您没有使用名称属性。用以下内容更新:

<form id="updateDiffDayForm" method="post" action="updateDiffDay.php">
    <input class="field" type="text" placeholder="Select a date" id="datepicker" name="datepicker">
    <input type="text" id="diffDayDailyMetric" class="field" placeholder="Enter weight" name="diffDayDailyMetric" />
</form>

这应该可以解决问题。