Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Jquery Ajax exapmle in php

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 594
    Comment on it

    Here in this blog i have shown  a simple example how to use AJAX to send and retrieve data from a PHP page and then populate the result from a PHP page in a HTML element.

    The example here shows when I select a country a request is send to PHP page and the result i.e. the states of that country are populated into another SELECT element and when i select a states then again a request is sent to the PHP page and the result i.e. the cities are populated into another SELECT element accordingly.

    Here is JQUERY code:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    	<script type="text/javascript">
    		$(document).ready(function(){
    			$("#cnrty").change(function(){
    				$("#city option").remove();
    				var val = $("#cnrty option:selected").text();
    				$.ajax({
    			            url: "get_details.php",
    			            type: 'POST',
    			            data: { country : val },
    			            success: function(data) {
    							//$('#lblmsg3').text("Invalid Username/Password");
    							$("#states").html(data);
    			            },
    			            error: function(xhr, textStatus, errorThrown) {
    			            	alert("An error occurred with the server");
    			            }
    			    });
    			})
    			$("#states").change(function(){
    
    				var val = $("#states option:selected").text();
    				$.ajax({
    			            url: "get_details.php",
    			            type: 'POST',
    			            data: { states : val },
    			            success: function(data) {
    							//$('#lblmsg3').text("Invalid Username/Password");
    							$("#city").html(data);
    			            },
    			            error: function(xhr, textStatus, errorThrown) {
    			            	alert("An error occurred with the server");
    			            }
    			    });
    			})
    		});
    	</script>
    
    

    Here is Body :

    <body>
    	<select id="cnrty">
    		<option value="0">-Select Country-</option>
    		<option value="1">India</option>
    		<option value="2">USA</option>
    	</select>
    	<select id="states">
    	</select>
    	<select id="city">
    	</select>
    </body>
    

    And here is PHP page:

    <?php
    
    	if(isset($_POST['country']) && !empty($_POST['country'])){
    		$cntry = $_POST['country'];
    		if (strcasecmp($cntry,"India")==0) {
    			echo "<option value='0'>-Select States-</option>";
    			echo "<option value='1'>U.P.</option>";
    			echo "<option value='2'>Punjab</option>";
    			echo "<option value='3'>Rajasthan</option>";
    		}
    		else if (strcasecmp($cntry,"USA")==0 ) {
    			echo "<option value='0'>-Select States-</option>";
    			echo "<option value='1'>California</option>";
    			echo "<option value='2'>Hawaii</option>";
    			echo "<option value='3'>Texas</option>";
    		}
    		echo $cntry;
    	}
    
    	if(isset($_POST['states']) && !empty($_POST['states'])){
    		$states = $_POST['states'];
    		if (strcasecmp($states,'U.P.')==0) {
    			echo "<option value='0'>-Select City-</option>";
    			echo "<option value='1'>Lucknow</option>";
    			echo "<option value='2'>Kanpur</option>";
    			echo "<option value='3'>Agra</option>";
    		}
    		else if (strcasecmp($states,'Punjab')==0) {
    			echo "<option value='0'>-Select City-</option>";
    			echo "<option value='1'>Amritsar</option>";
    			echo "<option value='2'>Ludhiana</option>";
    			echo "<option value='3'>Jalandhar</option>";
    		}
    		else if (strcasecmp($states,'Rajasthan')==0) {
    			echo "<option value='0'>-Select City-</option>";
    			echo "<option value='1'>Jaipur</option>";
    			echo "<option value='2'>Jodhpur</option>";
    			echo "<option value='3'>Udaipur</option>";
    		}
    		else if (strcasecmp($states,'California')==0) {
    			echo "<option value='0'>-Select City-</option>";
    			echo "<option value='1'>Belmont</option>";
    			echo "<option value='2'>California City</option>";
    		}
    		else if (strcasecmp($states,'Hawaii')==0) {
    			echo "<option value='0'>-Select City-</option>";
    			echo "<option value='1'>Honolulu</option>";
    			echo "<option value='2'>Kula</option>";
    		}
    		else if (strcasecmp($states,'Texas')==0) {
    			echo "<option value='0'>-Select City-</option>";
    			echo "<option value='1'>Houston</option>";
    			echo "<option value='2'>Dallas</option>";
    			echo "<option value='3'>fbsql_get_autostart_info()</option>";
    		}
    	}
    ?>

    I have written states and city hard-coded here, you can save the values in a DATABASE and then can get the data from database and use here accordingly.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: