php - I want to get the value of the span (checkout_date) -
this code allows user enter following details hotel booking reservation:
- phone number
- number of rooms
- number of nights
- whether require breakfast or not
- booking date
the checkout date outputs when user enters booking date , number of nights. however, i'm trying update database whenever user clicks book , checkout date saves in database.
jquery code checkout date happen , total cost stay:
<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 code booking details entered;
<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 phone number" pattern="[0-9]{4}[0-9]{3}[0-9]{3}" title="please enter in phone number in 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 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 require 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>
the structure of database table called 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)
code inserting in db
<?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 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"); } } ?>
the reason you're getting undefined index
error checkout_date
date because php's $_post
method can read inputs have name.
in order script working have couple of options:
1. use ajax
ajax give greater flexibility can select element via jquery, store them in variables , submit. won't limited input
fields way php forms.
a starting point read official documentation: http://api.jquery.com/jquery.ajax/
2. use styled, readonly input field
in html:
change <span id="checkout_date">n/a</span>
<input id="checkout_date" name="checkout_date" readonly>
then update jquery methods:
change $('#checkout_date').text(new_date)
$('#checkout_date').val(new_date)
because that's how set value of input field.
this give input field user cannot edit. can style via css doesn't input field, example make same way span does.
3. use hidden input field , span
in html:
create input field , add hidden
attribute it, while keeping span. make sure id of input , span different, you'll need apply different jquery methods them. example:
<input id="checkout_date_input" name="checkout_date" hidden> <span id="checkout_date_span">n/a</span>
in jquery:
$('#checkout_date_span').text(new_date); $('#checkout_date_input').val(new_date);
summary
any of above methods let checkout date via
$checkoutdate = $_post['checkout_date']
Comments
Post a Comment