PHP Classes

File: assets/js/states_by_country.js

Recommend this page to a friend!
  Classes of Channaveer Hakari   PHP Dependent Drop Down Tutorial   assets/js/states_by_country.js   Download  
File: assets/js/states_by_country.js
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: PHP Dependent Drop Down Tutorial
Create dependent dropdowns using jQuery AJAX
Author: By
Last change:
Date: 2 years ago
Size: 1,805 bytes
 

Contents

Class file image Download
/** On change of Country dropdown trigger the following code */ $('#country').on('change', function() { /** Variable to hold countryId */ var countryId = $(this).val(); /** Variable to hold countryStatus */ var countryStatus = $('.country-status'); /** Validate country */ if (countryId == 'undefined' || countryId == '') { countryStatus.html('Please select country'); return false; } countryStatus.html(''); /** Load the states based on the country selected using AJAX call */ getStatesByCountryId(countryId); }); /** Function to implement the AJAX states fetching */ function getStatesByCountryId(countryId) { var countryStatus = $('.country-status'); countryStatus.html('Loading states...'); /** AJAX Request to API to fetch states */ $.ajax({ "url": "api/state_by_country.php", "type": "POST", "dataType": "JSON", "data": { country_id: countryId }, "success": function(retObj) { /** Check if the ajax request return data had any error */ if (retObj.status == 'error') { countryStatus.html(retObj.error); return false; } /** If the ajax request return data was success */ /** Variable to store the states records */ var states = retObj.data.states; var stateOptions = '<option value="">Select State</option>'; /** Loop through states and append to state select dropdown */ $.each(states, function(key, state) { stateOptions += "<option value='" + state.id + "'>" + state.name + "</option>" }); $('#state').html(stateOptions); countryStatus.html(''); } }); }