I have two page first one is packagebuilder.php then second one is hotel.php. I have to pass data from packagebuilder.php to hotel.php. hotel.php is caring table of hotel list and that list i want to show in the packagebuilder.php
this is input section when i put all the detail in the form then click on the submit button then only hotel list section should be refresh with the hotel list of item in the table not the whole page
<div>
<select id="Country" class="dropdown">
<option value="">Select</option>
...
</select>
<select id="Destination" class="dropdown">
<option value="">Select</option>
...
</select>
<input type="date" name="checkin" id="name" placeholder="Date" required/>
<input type="date" name="checkout" id="name" placeholder="Date" required/>
<input type="text" name="hotel" id="hotel" placeholder="Hotel... Optional" required/><br/><br/>
<select id="room" class="dropdown">
<option value="">Select</option>
...
</select>
<select id="adult" class="dropdown">
<option value="">Select</option>
...
</select>
<select id="child" class="dropdown">
<option value="">Select</option>
...
</select>
<select id="infant" class="dropdown">
<option value="">Select</option>
...
</select>
<select id="ratingmin" class="dropdown">
<option value="">Select</option>
...
</select>
<select id="ratingmax" class="dropdown">
<option value="">Select</option>
...
</select>
<input type="submit" id="submit" name="submit" value="Submit" class="button">
<br/><br/>
</div>
try to use this
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#submit').click(function() {
var country_id = $("select#ddlcountry option:selected").attr('value');
var dest_id = $("select#ddldest option:selected").attr('value');
var rooms_val = $("select#ddlroom option:selected").attr('value');
var adult_val = $("select#ddladult option:selected").attr('value');
var child_val = $("select#ddlchild option:selected").attr('value');
var infant_val = $("select#ddlinfant option:selected").attr('value');
var rtmin_val = $("select#rtmin option:selected").attr('value');
var rtmax_val = $("select#rtmax option:selected").attr('value');
var checkin = $("#checkin").val();
var checkin = $("#checkout").val();
var checkin = $("#hotel").val();
var datastring = {
"ddlcountry":country_id,
"ddldest":dest_id,
"checkin":checkin,
"checkout":checkout,
"hotelname":htmane,
"ddlroom": rooms_val,
"ddladult":adult_val,
"ddlchild":child_val,
"ddlinfant":infant_val,
"rtmin":rtmin_val,
"rtmax":rtmax_val,
}
$.ajax({
type: "POST",
url: "hotel.php",
data: datastring,
cache: false,
success: function(html) {
$('.result').html( html );
}
});
});
});
</script>
You just need to send ajax request with serialized form data to hotel.php and show response into your page
$('#myForm').on('submit',function(e){
e.preventDefault();
var data = $('#myForm').serializeArray();
$.post("hotel.php", data, function(){
$( ".result" ).html( data );
});
});
The best way is to write the Hotel List table in a separate file called 'hotel.php', and the include that file in the hotel list section div in the main page(packagebuilder.php).
first create a div to show hotel list section, in packagebuilder.php
<div id="div-hotel-list"> </div>
Also add the following script in the <head> section...
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function() {
$('#submit').on('click', function() {
var url = 'hotel.php'; // the page containing Hotel list only
$('#div-hotel-list').load(url); // the div in the main page where hotel list should be displayed.
});
});
</script>