Как изменить форму, содержащую div после проверки и отправки?

Question

У меня есть форма, которая проверяет с помощью jquery. Идентификатор формы - «контакт», и он внутри div, называемого «formdiv».

Я хочу, чтобы при отправке вместо перехода на новую страницу "contact_received.php" содержимое "formdiv" заменялось содержимым "contact_received.php", включая отправленные данные $ _GET. (например: echo «спасибо». $ _ GET ['name']. 'за то, что связались с нами, мы свяжемся с вами по поводу'. $ _ GET ['message']). Я искал что-то подобное в Интернете и подумал, что буду использовать обработчик отправки jquery:

$("#contact").validate({    
rules: {SOME RULES-clipped for length}, 
messages: {SOME MESSAGES-clipped for length},

submitHandler: function() { 
    $.ajax({
        url: '/contact_received.php',
        type: "GET",
        data: datastring,    
        cache: false,
        success: function (html) {             
            $('#formdiv').fadeOut('slow',complete);
            function complete() { 
                $('#formdiv').fadeIn('slow').html(html); 
                $('.loading').hide();
            }
        }
    });
}
});

код формы здесь:

<div id="formdiv">

    <form id="contact" name="contact" action="/contact_received.php" method="get">

        Your Name

        <input type="text" name="name" id="name" value="" style="display:block;">

     Your Email

      <input type="text" name="email" value="" style="display:block;">

      messsage

      <textarea name="message" cols="50" rows="5" style="display:block;"></textarea>

     <input type="submit" class="btn" value=

      "Contact Us" name="Submit">

  </form> 
</div>

Это не нарушает валидацию, а просто ведет меня прямо на страницу contact_received.php. Что я делаю не так?

Answer 1

Я попробовал ваш код на моем ПК, и он работает хорошо. Я даже добавил некоторые правила и сообщения.

$("#contact").validate({
    rules : {
        name : { required: true, minlength: 3 },
        email : { required: true, email: true },
        message: { required: true, minlength: 5 }
    },
    messages: {
        name: {
           required: "We need your name to identify you",
           minlength: jQuery.format("At least {0} characters required!")
        },
        email: {
           required: "We need your email address to contact you",
           email: "Your email address must be in the format of name@domain.com",
        },
        message: {
            required: "You need to write something",
            minlength: jQuery.format("At least {0} characters required!")
        }
    },
    submitHandler: function() { 
        $.ajax({
            url: './contact_received.php',
            type: "GET",
            data: 'name=Romain&message=something',    
            cache: false,
            success: function (html) {            
                $('#formdiv').fadeOut('slow',complete);
                function complete() { 
                    $('#formdiv').fadeIn('slow').html(html); 
                    $('.loading').hide();
                }
            }
        });
    }
});

Я предлагаю вам показать нам ваши правила и сообщения. Если в коде javascript есть синтаксическая ошибка, вы будете перенаправлены на целевую страницу.

(Совет: чтобы увидеть ошибки Javascript в Firefox, перейдите в главное меню Firefox => Веб-разработка => Консоль ошибок). Надеюсь, меню на английском одинаковые, я французский.

РЕДАКТИРОВАТЬ: Я также добавил точку перед именем вашего php-файла: url: './contact_received.php'. На моем компьютере, если я не пишу, ничего не происходит, когда я отправляю форму (нет перенаправления, ничего)

Answer 2

ОК, вы используете плагин проверки.Попробуйте изменить это:

<form id="contact" name="contact" action="/contact_received.php" method="get">

на это:

<form id="contact" name="contact" action="">

И удалите возвращаемое ложное значение, которое я предлагал ранее, когда у меня не было кода формы.

Хорошо, теперь, когда мы прошли это.Попробуйте это:

$.ajax({
    url: '/contact_received.php',
    type: "GET",
    data: datastring,    
    cache: false,
    success: function (html) {
        function complete() { 
            $('#formdiv').fadeIn('slow').html(html); 
            $('.loading').hide();
        }             
        $('#formdiv').fadeOut('slow',complete);

    }
});

Я настроил функцию ajax, чтобы определить полную функцию до ее вызова, а не после, как вы это сделали.

Попробуйте.