Rectangle 27 0

javascript Ajax Combo box with `Please Wait` label For Loding Data?


#for-male, #for-female{
  display:none;
}
$(document).ready(function() {
  //save actual text
  var text = $('#test').html();
  
  $('#users').on('change', function() {
    $('#for-male, #for-female').hide()
    var value = $(this).val()
    if (value == "1") {
      $('#for-male').show();
    } else {
      $('#for-female').show();
    }
    //change text to loading
    $('#test').html('Loading...');
    
    //this is demo code for testing, here you will call your ajax function
    setTimeout(function(){
      //change back to orignal text
      $('#test').html(text);
    }, 1000);

  });

  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <select name="users" id="users">
        <option value="">Select a person:</option>
        <option value="1">Male</option>
        <option value="2">Female</option>
      </select>
  <button type="submit" id="for-male" styl>Male</button>
  <button type="submit" id="for-female">Female</button>
 <br>
<div id="txtHint"><b id="test">Person info will be listed here.</b>
</div>
Loading...
Person info will be listed here.
Note