All geek questions in one place

Ajax Combo box with the words "Please wait" to download data

How can I find a shortcut Please wait..or Loding...For Loding data time below my Combo field?

I want when I switch between a man and a woman, see Loading...the Switch section See this photo

HTML

<body>
    <form>
      <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>
    </form> <br>
    <div id="txtHint"><b>Person info will be listed here.</b>
    </div>
</body>

javascript will look like this

$(document).ready(function() {
    $('#users').on('change', function() {
    $('#for-male, #for-female').hide()
    var value = $(this).val()
    if(value == "1") {
        $('#for-male').show();
    } else {
        $('#for-female').show();
    }

  });
});

and css will be

#for-male, #for-female{
  display:none;
}
0
source share
1 answer

$(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);

  });

  
});
#for-male, #for-female{
  display:none;
}
<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>
Run codeHide result
+2
source

Source: https://habr.com/ru/post/1712485/

More articles:


All Articles