Ajay Kumar Ajay Kumar - 7 months ago 15
Javascript Question

how to get data from different page with out refreshing the whole page

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

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>