0

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

2
  • Can you also provide the button declaration?
    – Praveen
    Jan 17, 2012 at 19:30
  • Yes the button is: <input type="submit" class="com_submit" value=" Submit Comment " />
    – Sygon
    Jan 17, 2012 at 19:30

2 Answers 2

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;
});
});
1
  • Thank you, I can't believe I missed that. That fixed the problem
    – Sygon
    Jan 17, 2012 at 19:34
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.