Ajax Combo box with `Please Wait` label For Loading Data

Question

How Can I Have a Please wait.. or Loding... label For Loding Data Time below of my Combo box?

I Want, When Switch Between Male And Female, see Loading... under Switch box

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>

The 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 the css will be

#for-male, #for-female{ display:none; }

Possible duplicate of Show "Loading..." in dropdown box

Nir O.
– Nir O.

2017-03-04 08:45:50 +00:00
Commented Mar 4, 2017 at 8:45 — Nir O.
– Nir O., Commented Mar 4, 2017 at 8:45
I'm New in Programming. Can You Edit with my code?

Saeed Heidarizarei
– Saeed Heidarizarei

2017-03-04 09:02:41 +00:00
Commented Mar 4, 2017 at 9:02 — Saeed Heidarizarei
– Saeed Heidarizarei, Commented Mar 4, 2017 at 9:02

Ismail Farooq · Accepted Answer · 2017-04-12 15:43:48Z

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

I Want, When Switch Between Male And Female, see Loading... in place of Person info will be listed here., I Mean Person info will be listed here. Change to Loading....
I Want, When Switch Between Male And Female, see Loading... under Switch box

Collectives™ on Stack Overflow

Ajax Combo box with `Please Wait` label For Loading Data

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related