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)

Can you post the markup? Hint: Do not attach handlers within other handlers. Move the logic to the submit handler instead. — Ram
– Ram, Commented May 29, 2014 at 15:08
Markup is now attached. Yes I'm using <input type="submit">, but I've tried it with and without and no difference. I'm sure there is a way to just use the .submit event for this without the .click, but I couldn't get it working that way either...Could you show me an example? — user2406852
– user2406852, Commented May 29, 2014 at 15:15
@mifi79, That's correct. I only want it to get the ID, and only process the rest IF the ID contains the string 'comment'. I have tried separating the .click() event from the .submit() and it works, but for some reason, it prevents all other submit forms from working after this one has been submitted...if that makes sense? If there's a way to do this with just the .submit(), that would be ideal. I'm still very new to js, and hitting dead ends. — user2406852
– user2406852, Commented May 29, 2014 at 15:25

mifi79 · Accepted Answer · 2014-05-29 15:33:45Z

2

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.

edited May 29, 2014 at 15:33

answered May 29, 2014 at 15:28

mifi79

1,1067 silver badges8 bronze badges

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

2 Comments

user2406852 Over a year ago

Thanks @mifi79 but that doesn't seem to work for me. I've updated the code to try to make my intent clearer. With the updated code, it works properly, BUT after submitting the form once, it sabotages all other forms and attempts to ajax them even though their ID's do not contain "comment" in them.

mifi79 Over a year ago

Hmmm... Do you have a link to the page that I could see? Do your other form inputs use the same class?

Pablo Ezequiel Leone · Accepted Answer · 2014-05-29 15:12:52Z

0

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! :)

answered May 29, 2014 at 15:12

Pablo Ezequiel Leone

1,39718 silver badges22 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related