Страница обновляется при отправке нажмите с ajax

Question

У меня есть небольшая система комментирования, которую я модифицировал и пытаюсь внедрить в сайт. Это в «Аяксе». Когда jQuery с HTML встроен в страницу, система комментирования работает нормально - т.е. когда пользователь нажимает кнопку отправки, код возвращает «false», останавливает обновление страницы и отправляет данные. НО, когда я реализовал код на своем сайте и поместил его в отдельный файл .js, код по какой-то причине не работает должным образом. Я имею в виду - страница после клика обновляется. Почему это так ? Код не изменяется вообще - когда он сам по себе, он работает, но не на сайте index.php при реализации. Я попытался изменить тип ввода на «кнопку» и вызвать функцию из onclick - страница не обновляется, но и не вводит ввод. У меня заканчиваются идеи о том, почему это так. Вот код:

$(document).ready(function () {
        $(".submit").click(function () {
            var name = $("#name").val();
            var email = $("#email").val();
            var comment_area = $("#comment_area").val();
            var dataString = 'name=' + name + '&email=' + email + '&comment_area=' + comment_area;
            var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
            var emailaddressVal = $("#email").val();
            if (name == '' || !emailReg.test(emailaddressVal) || comment == '') {
                alert('Please enter valid data and type in message'); return false;
            }
            else {
                $.ajax({
                    type: "POST",
                    url: "comments.php",
                    data: dataString,
                    cache: false,
                    success: function (html) {
                        $("#com_list").append(html);
                        $("#com_list").fadeIn("slow");
                        $("#flash").fadeOut('fast');

                    }
                });
            } return false;
        });
    });
//END
//COM LIST

//HTML / PHP
<div class="slider">
<form id="comment_form" name="comment_form" method="post" action="#"     
enctype="multipart/form-data">
<input type="text" id="name" name="name" maxlength="16"/>&nbsp;Name<br /><br/>
<input type="text" id="email" name="email"/>&nbsp;Email&nbsp;(will not show)<br /><br/>
<textarea id="comment_area" name="comment_area" maxlength="1000"></textarea><br /><br/>
<input type="submit" class="submit" name="submit_comment" value="submit"/>&nbsp;&  
nbsp;comment or <a href="index.php" id="cancel"   
onmousedown="$('.slider').hide();$('#com_list').show();"><u>cancel</u></a>
</form>
</div>

// comments.php

 if($_POST) {
 $name=$_POST['name'];
 $email=$_POST['email'];
 $comment_area=$_POST['comment_area'];
//$lowercase = strtolower($email);
//$image = md5( $lowercase );
$insert = mysqli_query($connect,"INSERT INTO comments (name,email,comment,com_date)   
VALUES ('$name','$email','$comment_area',curdate())"); 

}

////////////////

Спасибо за любые предложения ..

Answer 1

ах!

в вашем js есть ошибка:

в моей консоли я получаю "комментарий не определен"

if(name=='' || !emailReg.test(emailaddressVal) || comment=='')

и ранее у вас есть:

var comment_area = $("#comment_area").val(); //<-- 

Измените это на комментарий, и это, по крайней мере, пройдет.

РЕДАКТИРОВАТЬ: немного фона. когда firefox обнаруживает ошибку, иногда он ее проглатывает и просто прекращает запуск любого javascript после этой ошибки, поэтому возвращаемый вами false и / или предотвращающий код по умолчанию не срабатывает, поэтому он все равно собирается опубликовать форму и обновить страницу.

Answer 2

Измените эту строку:

$(".submit").click(function () {

На это:

$("#comment_form").submit(function () {

Событие submit инициируется элементом <form>, а не кнопкой отправки.

Answer 3

Держите свой проклятый код в чистоте, чтобы вы могли понять, что вы готовите ... Это будет работать для вас:

$(document).ready(function(){
    $("#comment_form").submit(function(e){
        e.preventDefault(); // stop refresh

        var name = $("#name").val();
        var email = $("#email").val();
        var comment_area = $("#comment_area").val();
        var dataString = 'name='+ name + '&email=' + email + '&comment_area=' + comment_area+'&submit_comment=true';
        var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
        var emailaddressVal = $("#email").val();
        if(name=='' || !emailReg.test(emailaddressVal) || comment==''){
            alert('Please enter valid data and type in message');
        } else{
            $.ajax({
                type: "POST",
                url: "comments.php",
                data: dataString,
                cache: false,
                success: function(html){
                    $("#com_list").append(html);
                    $("#com_list").fadeIn("slow");
                    $("#flash").fadeOut('fast');
                }
            });
        }
    });
    $('#cancel').click(function(e){
        e.preventDefault();
        $('.slider').hide();
        $('#com_list').show();
    });
});

Вот еще один чистый код ...

<div class="slider">
    <form id="comment_form" name="comment_form" method="post" action="#" enctype="multipart/form-data">
        <input type="text" id="name" name="name" maxlength="16"/>&nbsp;Name<br /><br/>
        <input type="text" id="email" name="email"/>&nbsp;Email&nbsp;(will not show)<br /><br/>
        <textarea id="comment_area" name="comment_area" maxlength="1000"></textarea><br /><br/>
        <input type="submit" class="submit" name="submit_comment" value="submit"/>&nbsp;&nbsp;comment or <a href="index.php" id="cancel"><u>cancel</u></a>
    </form>
</div>

Вот еще один чистый и БЕЗОПАСНЫЙ код

<?php
if(isset($_POST['submit_comment'])){
    $name           =   mysql_real_escape_string($_POST['name']);
    $email          =   mysql_real_escape_string($_POST['email']);
    $comment_area   =   mysql_real_escape_string($_POST['comment_area']);
    //$lowercase    =   strtolower($email);
    //$image        =   md5( $lowercase );
    $query  =   'INSERT INTO comments (name,email,comment,com_date) '.
                "VALUES ('$name','$email','$comment_area',CURDATE())";
    $insert = mysqli_query($connect, $query);
}
?>