Подтверждение скрипта контактной формы HTML5 php

#php #javascript #forms #html #confirmation

#php #javascript #формы #HTML #подтверждение

Вопрос:

У меня возникли некоторые проблемы с подтверждением скрипта. Стандартно он настроен на скрытие формы контакта и отображение сообщения с подтверждением, но это работает не во всех браузерах. После некоторых тестов я понял, что это не работает для большинства версий IE, которые составляют около 40% моих посетителей.

Как мне заменить сообщение «скрыть и показать» на «thankyou.html «? Я предполагаю, что это работает, поскольку большинство IE’ов не показывают сообщение с подтверждением, хотя им удается скрыть форму. Код в ‘header’ в настоящее время:

 <script src="php/js/jquery.validate.js"></script>
<script src="php/js/jquery.placeholder.js"></script>
<script src="php/js/jquery.form.js"></script>
<script>
$(function(){
$('#contact').validate({
submitHandler: function(form) {
    $(form).ajaxSubmit({
    url: 'thankyou.php',
    success: function() {
    $('#contact').hide();
    $('#contact-form').append("<p class='thanks'>Thank you! The message was sent.</center></p>")
    }
    });
    }
});         
});
</script>
  

Комментарии:

1. Я решил это до сих пор. Выясню, смогу ли я исправить это с помощью ваших тегов. Можете ли вы также опубликовать полную страницу с помощью CSS?

Ответ №1:

Решена.

Чтение http://groups.google.com/group/jquery-en/browse_thread/thread/58a9cbc1068d28c0/eb4bedb2cc36b126?pli=1

Я добавил условный скрипт

 <head>
<!--[if IE]>
<script >
document.createElement("section"); 
</script >
<![endif]-->
  

http://plungjan.name/test/testform_validation.html

Что вам нужно сделать, так это добавить к элементу, понятному IE.

Если вам не нужен условный скрипт, добавьте div в конец страницы и допишите к нему вместо этого, как здесь:http://plungjan.name/test/testformvalidation.html


Другая проблема: я получил

 Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.0.3705; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; InfoPath.1)
Timestamp: Tue, 17 May 2011 13:15:29 UTC


Message: Unexpected call to method or property access.
Line: 5569
Char: 5
Code: 0
URI: http://code.jquery.com/jquery-1.6.1.js
  

Кажется, что finally не поддерживается

Когда я добавил catch(e) {} перед тем, как ошибка finally исчезла

 resolveWith: function( context, args ) {
  if ( !cancelled amp;amp; !fired amp;amp; !firing ) {
    // make sure args are available (#8421)
    args = args || [];
    firing = 1;
    try {
      while( callbacks[ 0 ] ) {
        callbacks.shift().apply( context, args );
      }
    }
    catch(e) { /* ADDED BY ME */ }
    finally {
      fired = [ context, args ];
      firing = 0;
    }
  }
  return this;
},
  

Комментарии:

1. Смотрите мой ответ, я думаю, я знаю, почему он не будет отображаться, потому что в коде есть закрывающий тег center, и объект уже должен был быть закрыт, а IE не может найти другой объект center для закрытия и, следовательно, выдает ошибки.

2. Это возможно. но, кроме того, IE имеет репутацию не желающего, чтобы что-то добавлялось к форме, вместо этого обертывает форму вокруг контейнера, подобного DIV, и добавляет к нему вместо этого

3. <article class=»page-content grid_8″> <идентификатор раздела=»contact-form»> <h2 class=»ribbon-404″> Поговорите с нами!</h2> <идентификатор формы=»contact» метод =»post» действие =»»»> <p> — стандартная форма </p> </form> </section> </article>

4. Я не вижу там тега center. Таким образом, этот закрывающий центральный тег в инструкции append не нужен, и его не должно там быть.

5. Исходный код содержит сообщение благодарности между центральными тегами. Я удалял материал, чтобы опубликовать здесь код меньшего размера, и пропустил это.

Ответ №2:

Заменить

 $('#contact').hide();     $('#contact-form').append("<p class='thanks'>Thank you! The message was sent.</center></p>")
  

с window.location.href="thankyou.html";

Простое решение. Конечно, в этом коде используются относительные пути, замените «thankyou.html «с фактическим расположением этой страницы.

Кроме того, удалите часть, в которой говорится </center> . Вам не следует добавлять закрывающий тег в этот код, центральный объект уже должен быть корректно закрыт. Возможно, проблема в том, что IE не показывает это. HTML закодирован неправильно.

РЕДАКТИРОВАТЬ: И да, если вы так склонны, вы можете использовать jQuery через $(window.location).attr('href', 'thankyou.html'); , хотя это не дает никаких преимуществ моему оригинальному решению, которое легче читать и понимать, не говоря уже о том, что оно значительно быстрее.

Комментарии:

1. Есть ли у вас thankyou.html по тому же пути на сервере? Ошибка 405 указывает на проблемы с циклом HTTP, работает ли она для любого другого браузера? Возможно, проблема с сервером.

2. Я протестировал и получил ошибку в $ (location).attr. Кажется, для объекта location нет атрибута setAttribute

3. Я использовал window. расположение в приведенном выше коде, но на самом деле, окно. location.href=»thankyou.html «будет работать просто отлично.

Ответ №3:

Установить thankyou.php в качестве действия формы и используйте jQuery validate() только для того, чтобы убедиться, что поля формы были заполнены:

 <script>
    $(function(){
       $('#contact').validate({
            // Validate your form fields here
       });
    });
</script>
...
<form id="contact" action="thankyou.php" method="post">
  

Использовать thankyou.php для обработки отправки формы и перенаправления пользователя на thankyou.html:

 <?php
header("Location: thankyou.html");
?>
  

Такой подход устранит необходимость в вызове AJAX и скрытии формы.

Комментарии:

1. Да, хорошее решение или даже лучше, чтобы этот PHP-файл выводил HTML и, таким образом, даже устранял необходимость в thankyou.html .