Jquery: How do I combine a click listener with a submit event function?

Question

I'm trying to grab a dynamically generated ID from a form input, then wait for the user to submit it and process the submit only if the ID contains the string "comment". Currently, I can get the ID but the submit default action doesn't get prevented and a regular POST action occurs instead of the ajax. After days of trying to figure this out on my own, I'm feeling defeated... Any help would be greatly appreciated.

$(document).ready(function() {
var fullID;

$(".post-new-comment-input").click(function(){
    fullID = $(this).attr('id');
});

$(this).submit(function(e)
{
    if(fullID.indexOf("comment") > -1) <?php // execute only if the fullID contains "comment" ?>
    {
        e.preventDefault();

        var value   = $('#'+fullID).val();
        var justID  = fullID.substring(8); <?php // truncate first 8 chars, the 'comment-') ?>

        $.ajax({
            type: "POST",
            url: "actions",
            data: { 'comment-pid': justID, 'comment-uid': <?php echo get_current_user_id(); ?>, comment: value },
            dataType: 'json',
            success : function(response)
            {
                $('#post-discussion-'+justID).html(response[0]);
                $('#comments-count-'+justID).html(response[1]);
            }
        });
        $('#'+fullID).val(null); <?php // clear the input field after returning post result ?>  
    }
});
});

Here's the form:

    <div class="comment-form">
        <form>
                <input type="text" id="comment-<?php echo $post_id; ?>" class="post-new-comment-input" placeholder="Write your comment...">
                <input type="submit" class="hide"> 
            </form>
    </div>

(Sorry if the formatting is messed up, I'm not used to how SO's post formatting)

Answer 1

I'm not sure I follow what you are doing here. The way your code is setup, it seems as though you are triggering the comment to submit when the user clicks into the comment field. I assume that wouldn't be the desired behavior and you would more likely want to trigger the submit when the user presses the enter key in the comment text area field (like on Facebook), in which case you would want to use the "keyup" event handler. Your submit function would then check is it was the enter key that was pressed and otherwise do nothing.

$(".post-new-comment-input").on("keyup", function (event) {
    if (e.keyCode == 13) {
        [YOUR AJAX POST CODE HERE]
    } else return false;
});

That being said, I'm not sure how intuitive that is for the user to see a form without a submit button (for the non-tech savvy...) If you do indeed want to include the Submit button and have it work either way, you can put your code into a separate event handler for the submit and then trigger the submit event if the user presses the enter key in the text area.

Answer 2

If I were you I would attach the event to the submit event of the form element.

To prevent the default event you should return false from your function. Or you can do event.preventDefault().

But do that in the on-submit event will be the correct way. I think! :)