Question

这是我的代码，允许用户输入酒店预订的以下详细信息：

电话号码
房间数
夜数
是否要求早餐
预约日期

当用户输入预订日期和晚数时，输出结账日期。但是，每当用户点击书籍并且结帐日期保存在数据库中时，我都会尝试更新我的数据库。

结帐日期的Jquery代码以及停留的总费用：

<style>
#checkout_date,
#total_price {
color: red;
}
</style>  

<script>

$(document).ready(function() {
    $('#date, #NumberOfNights').on("change", updateCheckout);

    $('#price, #NumberOfNights, #NumberOfRooms').on("change", updateTotalPrice);

    function updateCheckout() {
        var bookingDate = $('#date').val();
        var numOfNights = $('#NumberOfNights').val();
        if (bookingDate != '' && numOfNights != '') {
            var new_date = moment(bookingDate, "YYYY-MM-DD").add(numOfNights, 'days').format("YYYY-MM-DD");
            $('#checkout_date').text(new_date);
        } else {
            $('#checkout_date').text('N/A');
        }
    }

    function updateTotalPrice() {
        var price = $('#price').val();
        var numOfNights = $('#NumberOfNights').val();
        var NumberOfRooms = $('#NumberOfRooms').val();
        if (price != '' && numOfNights != '' && NumberOfRooms != '') {
            var total_price = +price * +numOfNights * +NumberOfRooms;
            $('#total_price').text('£' + total_price);
            } else {
                $('#total_price').text('N/A');
        }
    }

});
</script>

要输入预订详情的Html代码;

<body>

  <form action="" method="POST">
    <fieldset>
      <legend>Personal Details: </legend>
      <label for="phone">Phone:</label>
      <input type="tel" name="phone" id="phone" required placeholder="Please enter in your phone number" pattern="[0-9]{4}[0-9]{3}[0-9]{3}" title="Please enter in a phone number in this format:#### ### ###">
      <select name="country" required>
        <option value=""></option>
        <option value="US">US</option>
        <option value="UK">UK</option>
        <option value="AUS">AUS</option>

      </select>
    </fieldset>
    <br>
    <fieldset>
      <legend>Booking Details: </legend>
      <label for="date">Booking date: </label>
      <input id="date" type="date" name="date" min="2017-01-04">
      <label for="numberOfRooms">Number of Rooms:</label>
      <input id="NumberOfRooms" type="number" name="numberOfRooms" min="1" max="4">
      <label for="numberOfNights">Number of Nights:</label>
      <input id="NumberOfNights" type="number" name="numberOfNights" min="1" max="60">
      <input id="price" value="<?php echo($price['Hotel_price']); ?>" type="number" hidden="hidden" min="0">
      <br>
      <br>
      <label>Checkout Date:</label>
      <span id="checkout_date"> N/A</span>
      <p>Do you require breakfast?</p>
      <label for="yesBreakfast">Yes:</label>
      <input id="yesBreakfast" type="radio" name="meals" value="yesBreakfast">
      <label for="noBreakfast">No:</label>
      <input id="noBreakfast" type="radio" name="meals" value="noBreakfast">
      <br>
      <!--<label for="balcony">Do you require a balcony?</label><input id="balcony" type="checkbox" name="balcony" value="yes" checked>-->
      <br>

      <label>Total Price:</label>
      <span id="total_price"> N/A</span>
      <br><br>
      <button name="submit" type="submit">Submit</button>

    </fieldset>
  </form>
</body>

数据库表的结构叫做book：

 id(int 11)
 username(varchar 30)
 hotel_id(int 11)
 phone(varchar 50)
 date(datetime)
 num_nights(int 60)
 num_nights(int 4)
 checkout(date)

用于插入数据库的代码

<?php

$con = mysqli_connect('localhost','root','','database');

if (isset($_POST['submit'])) {
    $id = $_GET['id'];
    $UserName = $_SESSION['user_name'];
    $Phone = mysqli_real_escape_string ($con, $_POST['phone']);
    $Date = mysqli_real_escape_string  ($con, $_POST['date']);
    $NumNights = mysqli_real_escape_string  ($con, $_POST['numberOfNights']);
    $NumberRooms = mysqli_real_escape_string  ($con, $_POST['numberOfRooms']);
    $Check_out =  mysqli_real_escape_string ($con, $_POST['check_outdate']);

    $sql ="INSERT INTO book (username, phone,date,num_nights, num_rooms, hotel_id, check_out) VALUES('" . $UserName . "', '" . $Phone . "', '" . $Date . "' , '" . $NumNights . "' , '" . $NumberRooms . "', '" . $id . "', '". $Check_out."')";



    if(mysqli_query($con, $sql)){
        echo("sucess");
    } else {
        echo("failed");
    }
}
?>

Answer 1

您的Undefined index日期出现checkout_date错误的原因是因为PHP的$_POST方法只能读取 >名称

为了使您的脚本正常工作，您有几个选择：

1。使用AJAX

AJAX将为您提供更大的灵活性，因为您可以通过jQuery选择任何元素，将它们存储在变量中然后提交。您不会像使用PHP表单那样仅限input个字段。

一个好的起点是阅读官方文档：http://api.jquery.com/jquery.ajax/

2。使用样式化的只读输入字段

在您的HTML中：

将您的<span id="checkout_date">N/A</span>更改为<input id="checkout_date" name="checkout_date" readonly>

然后更新你的jQuery方法：

将$('#checkout_date').text(new_date)更改为$('#checkout_date').val(new_date)，因为这是您设置输入字段值的方式。

这将为您提供用户无法编辑的输入字段。然后，您可以通过CSS对其进行样式设置，使其看起来不像输入字段，例如，您可以使其看起来与目前的跨度相同。

3。使用隐藏的输入字段和范围

在您的HTML中：

创建输入字段并向其添加hidden属性，同时保持跨度。确保输入的ID和跨度不同，因为您需要对它们应用不同的jQuery方法。例如：

<input id="checkout_date_input" name="checkout_date" hidden>
<span id="checkout_date_span">N/A</span>

在你的jQuery中：

$('#checkout_date_span').text(new_date);
$('#checkout_date_input').val(new_date);

摘要

上述任何一种方法都可让您通过

获取结帐日期

$checkoutDate = $_POST['checkout_date']

我想得到span的值（checkout_date）

1 个答案:

1。使用AJAX

2。使用样式化的只读输入字段

3。使用隐藏的输入字段和范围