不寻常的AJAX行为

Question

Here's my HTML

<form id="the_form">
          Zip / Postal Code: <input id="zip" type="text" name="zip"><br/>
          <input type="submit" value="Submit" id="submitButton">
</form>


<div id="output"></div>

Here's my jQuery

<script type="text/javascript">
  $("document").ready(function() {

   $("#submitButton").on("click",function(){

     var value_to_send_to_php = $.trim($("#zip").val());

        if(value_to_send_to_php != "") {

              $.post("formphptoajax_rb.php",  $("#the_form").serializeArray() , function(data) {
                  //#1 doesn't work here
              });   
                  //#2 doesn't work here         
        }    
                  //#3 doesn't work here
    });

      $("#output").text("success");

  });
</script>

The above jQuery works fine. That is, on clicking submit, I get "success" output in the div with id "output".

What I can't understand is why I don't get the same result when I place $("#output").text("success"); at the locations marked #1, #2, or #3.

At #1 and #2 I get no output. At #3, I get "success" for a fraction of a second and then it vanishes.

Answer 1

As well as the click handler, the page is also submitting since you have clicked a "submit" button.

Use input type="button" instead. This is what it is designed for: a non-submitting button.