performing php post with jquery.ajax

Question

I am trying to run this tutorial

i did not implement the validation part yet, but my problem shouldn't be based on this. Here is my code:

<script type="text/javascript">
$("#submitbutton").click(function () {
  var content = $.("#contentarea").val();
  $.ajax({
    type: "POST",
    url: "addArticle.php",
    data: content,
    success: $.("#addArticle").append("<p>ok</p>")
  });
  return false;
})
</script>

As seen in the demo, it should not refresh the page because of the return false statement and also should do a post instead of get. But neither it does. It will continue to reload the page and also append the given content to the url as an argument. How do i prevent this / where is my failure?

Here is the whole thing

Answer 1

The tutorial you have followed is incorrect. There are more ways to submit a form than just clicking on its submit button (for example, you can press return while in a text field). You need to bind your code to the form's submit() event instead of the button's click() event.

Once you have done this, use your in-browser debugger to check whether the code is actually being run when you submit the form.

Also, the success parameter needs to be a function:

submit: function() { $("#addArticle").append("<p>ok</p>") } 

EDIT : also, you have written $.( instead of $( several times. This will cause a runtime error, which may cause the code that blocks the submission to fail.

Answer 2

Well well well...

A few less nerves later, it works. I decided to use the jquery form plugin

But, and i bet you'll love that, i have no idea why it is working:

        <script> 

        $(document).ready(function() { 

            $('#addForm').ajaxForm(function() { 
                alert("ok"); 
            }); 
        }); 
    </script> 

    <div id="addArticle">
        <form id="addForm"  method="post" action="addArticle.php">

                <textarea id="contentarea" required="required" name="content">    </textarea>
                <br />
                <input type="submit" id="submitbutton">
        </form>
    </div>

I guess the author has done pretty good work, just wanted to tell my solution to that future guy who is searching on google for that problem.