html - Javascript button text change before processing -

i have button has value "submit". text change "submitting" @ clicked. @ moments, have this:

<input type="button" id=btnsub name="submittoenicq"  value="submit" onclick="do_submission()"> <div id="results"> no submission has been performed yet</> <script>   function do_submission() {     var elem = document.getelementbyid("btnsub");     elem.value="submitting";     var xhreq = new xmlhttprequest();     var request = "main.php?pid=21&submitenicq=yes "      xhreq.open("get", request, false);  // send request     xhreq.send(null);     document.getelementbyid("results").innerhtml=xhreq.responsetext; } </script> 

i text change before xmlhttprequest processed, change immediate user. above code seems change button text once whole request has been completed (normally 3 seconds after button press).

does have solution this?

don't perform synchronous ajax requests. they're made asynchronous requests:

function do_submission() {     var elem = document.getelementbyid("btnsub");     elem.value="submitting";     var xhreq = new xmlhttprequest();     var request = "main.php?pid=21&submitenicq=yes "       // removed third parameter (it's 'true' default)     xhreq.open("get", request);      // added callback function handling different states     xhreq.onreadystatechange = function () {       if (xhreq.status == 200 && xhreq.readystate == 4) {         document.getelementbyid("results").innerhtml=xhreq.responsetext;       }       };      xhreq.send(null);  } 

your current code waits request complete before can update ui parts.

the code above fires request asynchronously, function end before request has completed , browser has time updating ui.

jquery:

function do_submission() {     $("#btnsub").val("submitting");      $.get("main.php?pid=21&submitenicq=yes", function (data) {       $("#results").html(data);     }); }