如何安装结帐日期并防止用户更改它？

我想制作类似于酒店预订系统的入住和结帐的东西。到目前为止，我允许用户输入预订日期（即签入）。但是，我希望实施一个未经编辑的输入，其中包含checkin的值加上晚上的数量。如何安装结帐日期并防止用户更改它？

因此，在用户选择了预订日期和夜晚数量之后，它将它们加在一起并在侧面显示结帐日期（但用户不能更改它）。持续时间结束后，用户可以再次预订同一家酒店，而无需告知用户他们已经预订了该酒店。

   <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"> 
         <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> 
         <button name="submit" type="submit">Submit</button> 

        </fieldset> 
       </form> 


      </body> 
      </html>

的书数据库表和酒店书籍表： ID（INT 11）用户名（VARCHAR 30） HOTEL_ID（INT11）电话（VARCHAR 50）日期（日期时间） num_rooms（ INT 60） num_nights（INT 4）

表酒店 ID（INT 11） HOTEL_NAME（文本） Hotel_location（文本） Hotel_price（INT 11） image（varchar 500） description（text）

来源

2017-04-13 amir

嗯，你已经告诉我们你想要做什么......问题是，你没有告诉我们你遇到了什么问题。我们不是读心者，我们不会为你写代码 – freefaller

我试图做到这一点，但它没有工作，然后我错误地删除了代码... – amir

任何帮助？请 – amir

我建议你使用momentjs来处理日期相关的东西。
我加改变事件上都date和NumberOfNights调用updateCheckout()，该函数将处理退房日期

希望它有助于

$(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'); 
 
    } 
 
    } 
 

 
});

#checkout_date, 
 
#total_price { 
 
    color: red; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 

 
<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"> 
 
     <label for="price">Single Room Price: </label> 
 
     <input id="price" type="number" 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> 
 

 
</html>

来源

2017-04-13 18:38:18

谢谢丹尼尔！我怎样才能添加由酒店的价格的夜晚数？假设每晚在酒店花费45英镑，并且用户想要逗留4晚。我将如何做这样的事情？我会发布我的表在数据库中... – amir

@amir你的意思是总价？ –

是总价 – amir

如何安装结帐日期并防止用户更改它？

回答

相关问题