Ajax请求后页面刷新

Question

Alright, I have a simple form comprising of only a text field . Data written in the text field is stored in DB when we hit submit (Stored via ajax). The ajax works fine and data is submitted, however, the page get's refreshed automatically and the URL contains the content of the input field.

My Form :-

<form class="form-horizontal">
                <fieldset>

                <!-- Text input-->
                <div class="form-group">
                  <label class="col-md-4 control-label" for="message"></label>  
                  <div class="col-md-5">
                  <input id="message" name="message" type="text" placeholder="message" class="form-control input-md" required="">

                  </div>
                </div>

                <!-- Button -->
                <div class="form-group">
                  <label class="col-md-4 control-label" for="submit_message"></label>
                  <div class="col-md-4">
                    <button id="submit_message" name="submit_message" class="btn btn-success">Enter</button>
                  </div>
                </div>

                </fieldset>
                </form>

Ajax :-

$("#submit_message").click(function() {
    var message = $("#message").val();
    $.ajax({
      type: "POST",
      url: "ajax_getter.php?requestid=2",
      data: { message: message, c: c },
      dataType: "html"
    }).done(function( msg ) {
      //load_content();
      alert(msg);
});
});

PHP :-

//...
if($chat->insert("chat_threads", $arr))
    {
        echo 1;
    }
    else
    {
        echo 0;
    }

After the result is show in the popup , the page refresh and the URL becomes something like :- chat.php?message=454545&submit_message= Why is the page being refreshed ?

Answer 1

Seems that your form is being submitted. Try preventing the default event (ie submission):

$("#submit_message").click(function(e) {
    e.preventDefault();    // This prevents form from being sumbitted
    // the rest of your code
});