Question

I have a page that inputs values of textareas into a mysql database. Since this is a pseudo-submit I manually change the value of the textarea to nothing after the data is inputted. however, after i press submit, the data is inputted properly, but the textarea does not clear. the html (below) is echoed several times depending on the number of answers.

Jquery:

<script type='text/javascript'>
    $('document').ready(function(){

$('.commentContainer').load('../writecomment.php');

 $("form").on("submit", function (e) {
    e.preventDefault();

    var $form = $(this);
    $.ajax({
        "url": $form.attr("action"),
        "data": $form.serialize(),
        "type": $form.attr("method"),
        "response": function() {
            $('.commentContainer').load('../writecomment.php');
            $('.commentBox').val(""); //this line doenst work
        }
    });
});
});



</script>

HTML:

<textarea class='commentBox'  wrap='soft' name='comment'></textarea>
<input type='submit' value='comment' class='submitCommentBox'>

Answer 1

You are misusing on. It should be

$("form").on("submit", function (e) {
    e.preventDefault();
    var $form = $(this);

    $.ajax({
        url: $form.attr("action"),
        data: $form.serialize(),
        type: $form.attr("method"),
        success: function () {
            $(".commentContainer").load("../writecomment.php");
            $(".commentBox").val("");
        }
    });
});

What you are doing now is attaching a handler to every .answerContainer that lives inside a form (which is presumably all .answerContainer‘s). That explains why the form submission stuff is happening once for every answer.

---

EDIT: I will try to make this clearer, since as per the comments you seem to have a hard time grasping what I’m trying to say. Very simply:

The following line is wrong:

$('.answerContainer').on('submit', 'form', function(event) {

It should be:

$("form").on("submit", function (event) {