CODEWITHSUNDEEP
phpjqueryajax
user1223654
user1223654

Reputation: 99

Why is my page refreshed when I submit a post by Ajax?

I am trying to create a post using Ajax and jQuery.

But it isn't working. It just refreshes the current page.

HTML :

<form name="update_text_post" action="" id="update_text_post" method="post">
    <textarea name="textbox" class="textbox" maxlength="600"></textarea>
    <input type="submit" name="submit" value="Update" class="update_post_submit">
</form>

jQuery : 

$('#update_text_post').submit(function(e) {
   e.preventDefault();
    $.ajax({
        type: "POST",
        url: "post_ajax2.php",
        data: dataString,
        cache: false,
        success: function (html) {
            $("#wallwrap").prepend(html);
            close_box();
            $('#update_text_post').resetForm();
        }
    });
 return false
});

The e.preventDefault(); is not working aswell.. it actually is not even performing the MYSQL query . Seems like it is not even sending the form or targeting the post_ajax2.php file.

Upvotes: 3

Views: 182

Answers (6)

dknaack
dknaack

Reputation: 60506

You have to call e.preventDefault(); in your function to prevent the form submit.

$('#update_text_post').submit(function(e) {
      // prevent form submit
      e.preventDefault();

      $.ajax({
               type: "POST",
               url: "post_ajax2.php",
               data: dataString,
               cache: false,
               success: function(html)
               {
                  $("#wallwrap").prepend(html);
                  close_box();
                  $('#update_text_post').resetForm();
               }
      });
});

Upvotes: 0

xdazz
xdazz

Reputation: 160883

// 1. you missed $ here, so it will not be a dom ready callback.
// your case is just define a function, and without executing it.
$(function () {
      $('#update_text_post').submit(function (e) {
          // 2. you need to prevent the default submit event.
          e.preventDefault(); 
          $.ajax({
              type: "POST",
              url: "post_ajax2.php",
              data: dataString,
              cache: false,
              success: function (html) {
                  $("#wallwrap").prepend(html);
                  close_box();
                  $('#update_text_post').resetForm();
              }
          });
      });
  });

  function afterSuccess() {
      $('#update_text_post').resetForm(); // reset form
      close_box();
  }

Upvotes: 1

Anthony Grist
Anthony Grist

Reputation: 38345

Clicking on a submit button does just that - it submits the form. If you want to replace the form submission with an AJAX POST request, you'll need to stop the form from also being submitted (and the page therefore reloading), by preventing the default behaviour of that event.

You can do this by calling return false; at the end of the callback function bound to the submit event handler, or by passing a reference to the event to the callback function and calling e.preventDefault() (where e refers to the event).

The key difference between the two methods is that return false, in a jQuery callback function, will also prevent the event from bubbling. In this case, that's not really a big deal.

Upvotes: 0

GG.
GG.

Reputation: 21854

Add return false.

$('#update_text_post').submit(function(e) {
    $.ajax({
     ...
    })
    return false;
});

Upvotes: 0

Shyju
Shyju

Reputation: 218812

You have to stop the default behavior of the submit button (form posting).Otherwise the form will be submitted again and you will see the page loading again ( you won't notice the change ajax brought to your page- some partial page updates ). You can use the preventDefault function to do this.

$(function(){
   $('#update_text_post').submit(function(e) {
     e.preventDefault();  // prevent the default submit behaviour
       $.ajax({
           type: "POST",
           url: "post_ajax2.php",
           data: dataString,
           cache: false,
           success: function(html)
           {
               $("#wallwrap").prepend(html);
               close_box();
               $('#update_text_post').resetForm();
           }
       });      
     });
});

Upvotes: 0

thecodeparadox
thecodeparadox

Reputation: 87073

You need to use .preventDefault() to stop the default form submit behavior with page reload.

$(function() {
    $('#update_text_post').submit(function(e) {
        e.preventDefault(); // e.preventDefault() for prevent form submisson with page reload
        $.ajax({
            type: "POST",
            url: "post_ajax2.php",
            data: dataString,
            cache: false,
            success: function(html) {
                $("#wallwrap").prepend(html);
                close_box();
                $('#update_text_post').resetForm();
            }
        });

    });
});

function afterSuccess() {
    $('#update_text_post').resetForm(); // reset form
    close_box();
}

Upvotes: 2

Related Questions