.click function not working

Question

I have JavaScript for a commenting system, however when I click on the submit button with the class name "com_submit" nothing happens except the page reloads. Even if I leave the form empty and submit the alert should pop up but it isn't. What am I doing wrong?

Here is my code:

$(function() {

$('.com_submit').live("click", function() {
    var comment = $("#comment").val();
    var user_id = $("#user_id").val();
    var perma_id = $("#perma_id").val();
    var dataString = 'comment='+ comment + '&user_id='+ user_id + '&perma_id=' + $perma_id;
    if(comment=='') {
        alert('Please Give Valid Details');
    }
    else {
        $("#flash").show();
        $("#flash").fadeIn(400).html('<img src="ajax-loader.gif" />Loading Comment...');
        $.ajax({
            type: "POST",
            url: "commentajax.php",
            data: dataString,
            cache: false,
            success: function(html){
                $("ol#update").append(html);
                $("ol#update li:first").fadeIn("slow");
                $("#flash").hide();
            }
        });
    }
    return false;
});
});

I have tried using .click, .live and .bind none of these work

Yes the button is: <input type="submit" class="com_submit" value=" Submit Comment " /> — Sygon
– Sygon, Commented Jan 17, 2012 at 19:30

ShankarSangoli · Accepted Answer · 2012-01-17 20:30:14Z

2

There is a typo in your code because of which runtime error occurs and page reloads since it is a link.

var perma_id = $("#perma_id").val();


$(function() {

$('.com_submit').live("click", function() {
    var comment = $("#comment").val();
    var user_id = $("#user_id").val();
    var perma_id = $("#perma_id").val();
    var dataString = 'comment='+ comment + '&user_id='+ user_id + '&perma_id=' 
     + perma_id;//<<<------ Here was the typo(You have used $perma_id)
    if(comment=='') {
        alert('Please Give Valid Details');
    }
    else {
        $("#flash").show();
        $("#flash").fadeIn(400).html('<img src="ajax-loader.gif" />Loading Comment...');
        $.ajax({
            type: "POST",
            url: "commentajax.php",
            data: dataString,
            cache: false,
            success: function(html){
                $("ol#update").append(html);
                $("ol#update li:first").fadeIn("slow");
                $("#flash").hide();
            }
        });
    }
    return false;
});
});

edited Jan 17, 2012 at 20:30

answered Jan 17, 2012 at 19:31

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

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

1 Comment

Sygon Over a year ago

Thank you, I can't believe I missed that. That fixed the problem

j08691 · Accepted Answer · 2012-01-17 19:30:53Z

0

That's working as expected. In other words, your submit button is submitting. What you want to do is stop the normal behavior. Try this:

$('.com_submit').live("click", function(e) {
e.preventDefault();
.
.
.

At the top of your code.

answered Jan 17, 2012 at 19:30

j08691

208k33 gold badges269 silver badges281 bronze badges

Collectives™ on Stack Overflow

.click function not working

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related