input text value after jquery ajax post

input text value after jquery ajax post

Hi,
 
I have a textfield and a button next to this field. When I click this button, a javascript function is called, i get the value from the textfield and submit this value to an action using jquery ajax. The action is called successfully and i am able to perform whatever i wanted to do with the value submitted in the action. But, the next time when I enter a new value in the textfield and click the button, in the javascript function, when I get the value from the textfield to submit, the value is still the old one, not the new one that I typed now. Not sure how to resolve this?
 
<html>
      <head>
            //jquery imports are done
            <script>
                  function submitToAction(){
                        var testvalue = document.getElementById("testField").value;
                        var testurl = "/test/test.action";
                        jQuery.ajax({
                               url:testurl,
                              type:"post",
                              data:"testvalue="+testvalue,
                              success:function(rsponseTxt){
                                    jQuery("#msgDiv").html("Value updated successfully");
                              }
                         });
            </script>
      </head>
 
      <body>
            <div id="samplediv">
                  <input type="text" value="" id="testField"/>
                  <input type="button" value="submit" onclick="submitToAction();return false;"/>
            </div>
 
            <div id="msgDiv">
            </div>
      </body>
</html>
 
Thanks,