Alright, I have a simple form prising 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 bees something like :- chat.php?message=454545&submit_message= Why is the page being refreshed ?

Alright, I have a simple form prising 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 bees something like :- chat.php?message=454545&submit_message= Why is the page being refreshed ?

• javascript
• php
• jquery
• ajax

• Instead catching button click try catching form submit .. and add e.preventDefault(); – Svetoslav Commented Sep 6, 2015 at 12:19

1 Answer 1

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

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