如何安裝結帳日期並防止用戶更改它？

我想製作類似於酒店預訂系統的入住和結帳的東西。到目前爲止，我允許用戶輸入預訂日期（即簽入）。但是，我希望實施一個未經編輯的輸入，其中包含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

如何安裝結帳日期並防止用戶更改它？

回答

相關問題