如何在不刷新整个页面的情况下从不同页面获取数据

Question

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

---

packagebuilder.php enter image description here

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>

---

Answer 1

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>