Question

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.

Answer 1

// 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();
  }