too long

Question

I am working on discussion that works like a forum. There can be several posts and users are supposed to comment.

I have this html post comment form which repeats itself after every post

 <form method="POST" action="/discussion/post-comment" id="post-comment-form" class="form-horizontal subcommentcofrm" role="form">
   <div class = "form-group">
        <div class = "col-sm-6">
            <input type = "text" class = "form-control comment-yako" id = "comment-field" placeholder = "Type your comment here..." autocomplete="off">

        </div>
   </div>
</form>

And this is my JQuery code with ajax submission:

    $("input.comment-yako").live('keypress', function(e) {
        if ((e.which && e.which === 13) || (e.keyCode && e.keyCode === 13)) {
            console.log('heey');
             $(this).closest('form').submit(function(e){
                console.log('heeeeeeey');
                var data = $(this).serializeArray();
                var url = $(this).attr("action");
                $.ajax({
                    url: url,
                    type: 'POST',
                    cache: false,
                    data: data,
                    success: function(data) {
                        var item = $(data).hide().fadeIn(800);

                        $('.disc-content-reply').append(item);

                    },
                    error: function(e) {
                        alert(e);
                    }
                });
                e.preventDefault();
            });

            $(this).closest(".comment-yako").val("");
            return false;
        } else {
            return true;
        }
    });

Submission is supposed to take place when the user hits enter key. My problem is, when I hit enter, the form does not submit. I do not know where the problem is; what am I doing wrong?

Any help will be much appreciated.

Thanks

Answer 1

You should send the AJAX request in the keypress handler itself, not in a submit handler that you bind after the keypress occurs. Most of the time it's wrong to bind one event handler inside another event handler; if you find yourself doing that, think very hard about whether it's really what you want to do.

In addition to changing that, I've converted the .live() call to .on(). I also changed from .serializeArray() to .serialize(), as this is the normal way to send form fields.

$(document).on('keypress', 'input.comment-yako', function(e) {
    if ((e.which && e.which === 13) || (e.keyCode && e.keyCode === 13)) {
        console.log('heey');
        var form = $(this).closest('form');
        var data = form.serialize();
        var url = form.attr("action");
        $.ajax({
            url: url,
            type: 'POST',
            cache: false,
            data: data,
            success: function(data) {
                var item = $(data).hide().fadeIn(800);
                $('.disc-content-reply').append(item);
            },
            error: function(e) {
                alert(e);
            }
        });
        e.preventDefault();
        $(this).val("");
        return false;
    } else {
        return true;
    }
});