Why am I getting “Uncaught ReferenceError: userId is not defined” error?

Question

Even though my alert($userId) prints out 1 ( which is the id of the user ), I still get an error as if userId is not defined. Any idea why?

$('.postComment').on('click', function(event){
            event.preventDefault();
            $userId = $("input[name=user_id]").val();
            $imageId = $("input[name=image_id]").val();
            $comment = $("textarea[name=comment]").val();
            alert($userId);

            $.ajax({
                method: 'POST',
                url: urlComment,
                data: {userId: userId, imageId: imageId, comment: comment}
            }).done(function(){
                alert('Works');
            })
        });

Answer 1

You are using jQuery and $ has very different use here:

Here's the cleanest way you can try:

    $('.postComment').on('click', function(event){
        event.preventDefault();
        $.ajax({
            method: 'POST',
            url: urlComment,
            data: {
                    userId: $("input[name=user_id]").val(), 
                    imageId: $("input[name=image_id]").val(), 
                    comment: $("textarea[name=comment]").val()}
        }).done(function(){
            alert('Works');
        })
    });

In your code, you had variable by the name of $userId and you were using userId which wasn't declared that's why you got error.

Answer 2

Try the following

$('.postComment').on('click', function(event){
        event.preventDefault();
        var userId = $("input[name=user_id]").val();
        var imageId = $("input[name=image_id]").val();
        var comment = $("textarea[name=comment]").val();
        alert(userId);

        $.ajax({
            method: 'POST',
            url: urlComment,
            data: {userId: userId, imageId: imageId, comment: comment}
        }).done(function(){
            alert('Works');
        })
    });

Or

$('.postComment').on('click', function(event){
        event.preventDefault();
     var   $userId = $("input[name=user_id]").val();
     var   $imageId = $("input[name=image_id]").val();
     var $comment = $("textarea[name=comment]").val();
        alert($userId);

        $.ajax({
            method: 'POST',
            url: urlComment,
            data: {userId: $userId, imageId: $imageId, comment: $comment}
        }).done(function(){
            alert('Works');
        })
    });