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

Question

One of my web pages has a link on it.

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

When the user clicks the updateDiffDay link a jquery modal dialog box opens with a form on it. The form has two fields, one is a datepicker and the other is a text box.

<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>

The dialog box has two buttons on it, Update and Cancel. When the user clicks the Update button the form should post the content the user entered on the form to the updateDiffDay.php file.

The code for the modal dialog box is as follows:

<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" );
});

});

The code for updateDiffDay.php is as follows:

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

Everything seems to work up until the fields in the form are posted to the PHP file. The problem is when the user clicks the Update button the content of the input boxes on the form (i.e., the date the user picks in the date picker and the value entered in the diffDayDailyMetric input box) are ignored and the default date for the datepicker, 1970-01-01, is posted to datepicker and nothing is posted to diffDayDailyMetric.

I've tried a lot and searched the forums but haven't been able to make this work. Any help would be greatly appreciated. This is the first time I have ever used jquery like this. Help is greatly appreciated. Thanks

Answer 1

In your form:

<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>

You're not using a name attribute. Update it with:

<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>

And that should do the trick.