Где реализовать код сообщения об успехе в скрипте валидатора?

Question

Эта вещь php / ajax / jquery нова для меня, но у меня есть намного лучшее понимание HTML / CSS.

Я занимаюсь разработкой сайта [http://vgdesign.net/thc/], и остается только запрограммировать форму, чтобы она выполняла именно то, что я хочу. Насколько мне известно, он функционирует нормально - за исключением того, что я хочу сделать еще одну вещь. Когда кнопка отправки нажата, и код проходит проверку, я хотел бы, чтобы появилось сообщение «Спасибо», как показано ниже, а также без обновления страницы.

[http://i.stack.imgur.com/GkMAI.png]

Я нашел код, который по сути должен делать именно это:

$(function() {

$("#send").click(function() {


    var name = $("#name");
    var email = $("#email");
    var comments = $("#comments");


    var dataString = 'name='+ name + '&email=' + email + '&comments=' + comments;


    if(name=='' || email=='' || comments=='')
    {
    $('.success').fadeOut(200).hide();

    }

    else
    {
    $.ajax({
    type: "POST",
    data: dataString,
    success: function(){
    $('.success').fadeIn(200).show();

   }

});

    }

    return false;
    });

});

Этот код был взят из http://www.9lessons.info/2009/04/submit-form-jquery-and-ajax.html Теперь я должен упомянуть, так как это не работает, это может быть проигнорировано .. возможно, есть другой способ достижения того, чего я хочу. Я просто показываю, куда меня взяли мои исследования. У меня есть .success, определенный в моей таблице стилей, и он находится в {display: none}, но я не могу заставить его работать из-за моего ограниченного знания языка.

Я предполагаю, что мне нужно найти способ интегрировать приведенный выше код в мой код проверки, чтобы сообщение отображалось сразу после успешной проверки. Я использовал http://www.position -absolute.com / article / jquery-form-validator-потому-form-validation-is-a-mess / для инструмента проверки.

Буду признателен за любую помощь в этом. Надеюсь, я не слишком запутался. Пожалуйста, дайте мне знать, если я могу уточнить что-нибудь еще.

Спасибо!

Answer 1

изменить это

var name = $("#name");
var email = $("#email");
var comments = $("#comments");

к этому

var name = $("#name").val();
var email = $("#email").val();
var comments = $("#comments").val();

вы сохраняли то, что, как я предполагаю, было элементом формы, а не значением, введенным в элемент формы.
вы также можете использовать функцию $.post() вместо $.ajax(), которая принимает первое значение удаленного базового URL-адреса, второе значение объекта с вашим dataString в качестве ключа, значения и функцию обратного вызова в качестве третьего значения.

$.post(
  'example.html',
  { 'name' : name, 'email' : email, 'comments' : comments},
  function(data){
    $('.success').fadeIn(200).show();
  }
);

переменная data будет содержать ваш ответ на вызов ajax, который, похоже, вам сейчас не нужен. Но в следующий раз;)

Answer 2

Вам захочется взглянуть на http://api.jquery.com/jQuery.post/, в котором рассказывается, как использовать jQuery API для запросов POST и обработки ответа. Здесь также есть несколько хороших примеров.

Если вы используете jQuery 1.5, вы можете сделать это по-настоящему понятным:

// Assign handlers immediately after making the request,
// and remember the jqxhr object for this request
var jqxhr = $.post("example.php", function() {
  alert("success");
})
.success(function() { alert("second success"); })
.error(function() { alert("error"); })
.complete(function() { alert("complete"); });