jQuery - заменить контактную форму на "сообщение с благодарностью"

#php #javascript #jquery #jquery-validate

#php #javascript #jquery #jquery-проверка

Вопрос:

У меня есть контактная форма, которая выполняет действие PHP. Контактная форма связана с механизмом проверки в jQuery. Если сообщение отправлено правильно, я просто включаю PHP-файл с сообщением благодарности — require_once('success.php'); . После отправки сообщения я хотел бы заменить контактную форму сообщением благодарности без перезагрузки всей страницы. Пожалуйста, дайте мне несколько советов, как это сделать. Вот мой html:

 <div id="contactForm">
<form id="expertForm" class="formular" method="post" action="send.php">
    <fieldset>
        <label>
            <input name="email"
                   id="email"
                   class="required email"
                   type="text"
                   size="40"/>
        </label>

        <p>
            <textarea name="body" id="body" rows="5" cols="50" class="required"></textarea>
        </p>
    </fieldset>
    <input class="submit"
           type="image"
           src="../images/btn-send.png"/>
</form>
</div>
<script type="text/javascript">
  $("#expertForm").validate();
</script>

У send.php меня есть:

 if(!$mail->Send()) {
echo "Mailer Error: " . $mail->ErrorInfo;
} else {
    require_once('success.php');
}

Ответ №1:

Вы можете увидеть почти рабочую демонстрацию здесь http://jsfiddle.net/v7MJA/1 /

 $(function(){
    $("#expertForm").submit(function(e){
        e.preventDefault();
        if(!$(this).validate().form()) return false;
        $.ajax({
            url:$(this).attr('action'),
            data:$(this).serialize(),
            type:'post',
            success:function(msg){
                $("#expertForm").replaceWith(msg);
            }
        });
    });
});

1. Я попробовал ваше решение. Замена выполнена правильно. Но возникла проблема с проверкой. Хотя не все входные данные формы заполнены, а плагин проверки вызывает ошибки (они появляются на странице около 0,5 секунды), действие выполняется, и электронное письмо отправляется. Я использую bassistance.de/jquery-plugins/jquery-plugin-validation для проверки.

2. Я отредактировал код для вас, вы также можете проверить скрипку jsfiddle.net/v7MJA . Спасибо

Ответ №2:

Вам лучше дать нам какой-нибудь код, чтобы мы могли помочь.

Вот теоретический способ: используйте success событие вызова jquery ajax ^[ref]:

 $.ajax({
  url: "test.html",
  context: document.body,
  success: function(){
    $("#myformdiv").html("Thanks!");
  }
});

предполагая, что ваша HTML-разметка выглядит примерно так:

 <div id="myformdiv">
   <form> 
     <!-- form code here -->
   </form>
</div>

1. Вы можете использовать функцию загрузки для загрузки отдельной страницы, если это то, что вам нужно. Замените html("Thanks!"); на load("success.php"); , и он загрузится success.php как отдельная страница и вставит ее в этот элемент.

Ответ №3:

Предполагая, что я правильно понял ваш вопрос, вы можете использовать replaceWith метод для замены соответствующих элементов указанным содержимым:

 $("#yourForm").replaceWith("<p>Thanks!</p>");

Я предполагаю, что вы делаете что-то асинхронно для отправки данных формы на сервер, поэтому вы можете просто запустить приведенный выше код в обратном вызове:

 $.post("yourScript.php", function() {
    $("#yourForm").replaceWith("<p>Thanks!</p>");
});