JQuery val not changing

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'>

That one line of code works just fine. Why aren't you using the ajax code in the accepted answer of your previous question? — Sparky
– Sparky, Commented Dec 31, 2011 at 20:27
@Sparky672 i accidentally copied and pasted my previous code. the code is now updated in my original question — kirby
– kirby, Commented Dec 31, 2011 at 20:39

Domenic · Accepted Answer · 2011-12-31 21:38:26Z

2

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) {

edited Dec 31, 2011 at 21:38

answered Dec 31, 2011 at 20:33

Domenic

113k42 gold badges227 silver badges275 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

kirby Over a year ago

i updated my original question with my actual current code that still does not clear the .commentBox value

Domenic Over a year ago

You are still misusing on in the same way you were before. You need to do $("form").on("submit", ...) not (".answerContainer").on("submit", "form", ...).

kirby Over a year ago

i have update my code to reflect your answer however the .commentBox still does not clear after in run the code

Domenic Over a year ago

Then you should ask a new question.

kirby Over a year ago

my updated code is now in this question. i originally used .post (your solution), but it would redirect hte page to localhost/comment.php instead of just submitting the data and not refreshing the page. i needed to use ajax.

|

Collectives™ on Stack Overflow

JQuery val not changing

1 Answer 1

11 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Linked

Related