Перейти к содержимому

Фотография
- - - - -

Куда именно вставить скрипт - обработчик формы на странице сайта? - JavaScript


  • Вы не можете создать новую тему
  • Авторизуйтесь для ответа в теме
Сообщений в теме: 10

#1 Pavl

Pavl

    Прохожий

    Топикстартер
  • Участник
  • 0
    15 сообщ.

Отправлено 27 Октябрь 2017 в 22:30

Добрый день!
Создал html-страницу на сайте. Затем разместил на этой странице форму обратной связи. Осталось только разместить обработчик созданной формы. В материале, от которого я отталкиваюсь при создании формы, сказано следующее: Для этого перед закрывающимся тегом вставьте следующий скрипт:. Только, не понимаю, о каком именно закрывающем тэге идёт речь: </div>, </body>, </html>, </form>?
При всех вариантах возникает одна и та же ошибка. Открывающий тэг <script> - как и положено красного цвета. А вот закрывающий тэг </script> - уже синего цвета. То есть скрипт не работает.
А Adobe Dreamweaver показывает синтаксическую ошибку в строке: var reg = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>
Весь скрипт - обработчик формы выглядит так:

<script type="text/javascript">
 
  function validateEmail(email) { 
    var reg = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return reg.test(email);
  }
 
  $(document).ready(function() {
    $(".modalbox").fancybox();
    $("#contact").submit(function() { return false; });
    $("#send").on("click", function(){
      var emailval  = $("#email").val();
      var namevl  = $("#name").val();
      var phonevl  = $("#phone").val();
      var msgval    = $("#msg").val();
      var msglen    = msgval.length;
      var mailvalid = validateEmail(emailval);
 
      if(mailvalid == false) {
        $("#email").addClass("error");
      }
      else if(mailvalid == true){
        $("#email").removeClass("error");
      }
  if(mailvalid == false) {
        $("#name").addClass("error");
      }
      else if(mailvalid == true){
        $("#name").removeClass("error");
      }
      if(mailvalid == false) {
        $("#phone").addClass("error");
      }
      else if(mailvalid == true){
        $("#phone").removeClass("error");
      }
      if(msglen < 4) {
        $("#msg").addClass("error");
      }
      else if(msglen >= 4){
        $("#msg").removeClass("error");
      }
      
      if(mailvalid == true && msglen >= 4) {
        // если обе проверки пройдены
        // сначала мы скрываем кнопку отправки
        $("#send").replaceWith("<em>отправка...</em>");
        $.ajax({
          type: 'POST',
          url: 'sendmessage.php',
          data: $("#contact").serialize(),
          success: function(data) {
            if(data == "true") {
              $("#contact").fadeOut("fast", function(){
                $(this).before("<p><strong>Успешно! Ваше сообщение отправлено  :)</strong></p>");
                setTimeout("$.fancybox.close()", 1000);
              });
            }
          }
        });
      }
    });
  });
</script>

Что я не так делаю? Объясните, пожалуйста.


  • 0

Спонсор

#2 BaNru

BaNru

    Пацифизжу

  • суперМодератор
  • 980
    3 504 сообщ.

Отправлено 27 Октябрь 2017 в 23:05

Сейчас скрипты принято вставлять в конце документа, а именно перед закрывающим BODY. Разумеется если не сказано и не предусмотрено иное.

DW ругается на регулярку. Он вполне возможно не может её разобрать, ему такое и не положено.
Регулярку можно проверить только тестами под чего она писалась.
Можно воспользоваться сервисом https://regex101.com/
Но если вы не знаете что такое регулярные выражения, то вам будет сложно сразу понять.
Если надумаете познавать азы этого ада, то начните от сюда https://ru.wikipedia...ярные_выражения
Но если она работает как надо, то можете не вдаваться пока в такие дебри.

К сожалению я не могу знать на что ругается у вас DW, вы бы привели текст ошибок или скриншот ошибок, тогда бы получили более точный ответ.
Однако, любая программа может иметь ошибки и вполне возможно, что DW заблуждается, поэтому работоспособность можно и нужно проверить в браузере.
  • 0

#3 Volly

Volly

    Увлеченный

  • Участник
  • 96
    468 сообщ.

Отправлено 28 Октябрь 2017 в 02:03

Что-то мне подсказывает, что в строке var reg ="и_тут_много_чего" должно быть в кавычках.

Попробуйте временно удалить эту строку и закрывающий тег сразу покраснеет.


Сообщение отредактировал Volly: 28 Октябрь 2017 в 02:05

  • 0

#4 BaNru

BaNru

    Пацифизжу

  • суперМодератор
  • 980
    3 504 сообщ.

Отправлено 28 Октябрь 2017 в 09:19

Что-то мне подсказывает, что в строке var reg ="и_тут_много_чего" должно быть в кавычках.

https://developer.mo..._Objects/RegExp
  • 0

#5 Volly

Volly

    Увлеченный

  • Участник
  • 96
    468 сообщ.

Отправлено 28 Октябрь 2017 в 12:20

Дрим знаю мало и потому сомнения у меня, что Дрим в зависимости от старины версии и настроек может не понимает литеральную запись регулярки.


  • 0

#6 Pavl

Pavl

    Прохожий

    Топикстартер
  • Участник
  • 0
    15 сообщ.

Отправлено 30 Октябрь 2017 в 21:42

Что-то мне подсказывает, что в строке var reg ="и_тут_много_чего" должно быть в кавычках.

Попробуйте временно удалить эту строку и закрывающий тег сразу покраснеет.

Да, скрипт покраснел, но ведь он не будет работать без данной строки...  :(


Дрим знаю мало и потому сомнения у меня, что Дрим в зависимости от старины версии и настроек может не понимает литеральную запись регулярки.

Какой же может быть выход из этого?


Сейчас скрипты принято вставлять в конце документа, а именно перед закрывающим BODY. Разумеется если не сказано и не предусмотрено иное.

DW ругается на регулярку. Он вполне возможно не может её разобрать, ему такое и не положено.
Регулярку можно проверить только тестами под чего она писалась.
Можно воспользоваться сервисом https://regex101.com/
Но если вы не знаете что такое регулярные выражения, то вам будет сложно сразу понять.
Если надумаете познавать азы этого ада, то начните от сюда https://ru.wikipedia...ярные_выражения
Но если она работает как надо, то можете не вдаваться пока в такие дебри.

К сожалению я не могу знать на что ругается у вас DW, вы бы привели текст ошибок или скриншот ошибок, тогда бы получили более точный ответ.
Однако, любая программа может иметь ошибки и вполне возможно, что DW заблуждается, поэтому работоспособность можно и нужно проверить в браузере.

В браузере скрипт, к сожалению, не работает.  :(


  • 0

#7 Volly

Volly

    Увлеченный

  • Участник
  • 96
    468 сообщ.

Отправлено 30 Октябрь 2017 в 22:44

Ну раз покраснел, значит на правильном пути.

В четвёртой строчке идёт проверка правильности почтового адреса и что-то мне подсказывает, что в этой строке есть ненужные символы, а какие определить не могу.

Попробуйте начать с малого.

Найдите в сети пример простейшего и очень короткого регулярного выражения проверки адреса.

Например, такое:

/^[^\s()<>@,;:\/]+@\w[\w\.-]+\.[a-z]{2,}$/i

или ещё короче, чтобы можно было понять что к чему.

Вставьте его в четвёртую строку вместо имеющейся абракадабры.

Если всё станет работать, то потом можно будет поискать более лучшую регулярку.


  • 1

#8 Pavl

Pavl

    Прохожий

    Топикстартер
  • Участник
  • 0
    15 сообщ.

Отправлено 03 Ноябрь 2017 в 21:10

Ну раз покраснел, значит на правильном пути.

В четвёртой строчке идёт проверка правильности почтового адреса и что-то мне подсказывает, что в этой строке есть ненужные символы, а какие определить не могу.

Попробуйте начать с малого.

Найдите в сети пример простейшего и очень короткого регулярного выражения проверки адреса.

Например, такое:

/^[^\s()<>@,;:\/]+@\w[\w\.-]+\.[a-z]{2,}$/i

или ещё короче, чтобы можно было понять что к чему.

Вставьте его в четвёртую строку вместо имеющейся абракадабры.

Если всё станет работать, то потом можно будет поискать более лучшую регулярку.

Html-код страницы:

<html>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
 
<body>
<div id="inline">
<h2>Онлайн заявка</h2>
<form id="contact" action="#" method="post" name="contact">
<input id="name" class="txt" name="name" type="name" placeholder="Ваше имя" />
 <input id="phone" class="txt" name="phone" type="phone" placeholder="Ваш телефон" />
<input id="email" class="txt" name="email" type="email" placeholder="Ваш e-mail" />
<textarea id="msg" class="txtarea" name="msg" placeholder="Ваше сообщение:"></textarea>
 <button id="send">Отправить</button>
</form>
</div>
 
 
 <script type="text/javascript">
  function validateEmail(email) {
    var reg = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return reg.test(email);
  }
 
  $(document).ready(function() {
    $(".modalbox").fancybox();
    $("#contact").submit(function() { return false; });
    $("#send").on("click", function(){
      var emailval  = $("#email").val();
      var namevl  = $("#name").val();
      var phonevl  = $("#phone").val();
      var msgval    = $("#msg").val();
      var msglen    = msgval.length;
      var mailvalid = validateEmail(emailval);
 
      if(mailvalid == false) {
        $("#email").addClass("error");
      }
      else if(mailvalid == true){
        $("#email").removeClass("error");
      }
  if(mailvalid == false) {
        $("#name").addClass("error");
      }
      else if(mailvalid == true){
        $("#name").removeClass("error");
      }
      if(mailvalid == false) {
        $("#phone").addClass("error");
      }
      else if(mailvalid == true){
        $("#phone").removeClass("error");
      }
      if(msglen < 4) {
       $("#msg").addClass("error");
     }
     else if(msglen >= 4){
        $("#msg").removeClass("error");
      }
     
      if(mailvalid == true && msglen >= 4) {
       // если обе проверки пройдены
       // сначала мы скрываем кнопку отправки
       $("#send").replaceWith("<em>отправить...</em>");
        $.ajax({
          type: 'POST',
          url: 'sendmessage.php',
          data: $("#contact").serialize(),
          success: function(data) {
            if(data == "true") {
              $("#contact").fadeOut("fast", function(){
                $(this).before("<p><strong>Успешно! Ваше сообщение отправлено   [:)] </strong></p>");
                setTimeout("$.fancybox.close()", 1000);
              });
            }
          }
        });
      }
    });
  });
</script>
 
</body>
</html>

Также php-файл обработчика формы:

<?php
$sendto   = "pochta@mail.ru"; // Обязательно измените e-mail на свой
$usermail = $_POST['email'];
$username = $_POST['name'];
$userphone = $_POST['phone'];
$content  = nl2br($_POST['msg']);
// Формирование заголовка письма
$subject  = "Новое сообщение";
$headers  = "From: " . strip_tags($usermail) . "\r\n";
$headers .= "Reply-To: ". strip_tags($usermail) . "\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html;charset=utf-8 \r\n";
// Формирование тела письма
$msg  = "<html><body style='font-family:Arial,sans-serif;'>";
$msg .= "<h2 style='font-weight:bold;border-bottom:1px dotted #ccc;'>Новое сообщение</h2>\r\n";
$msg .= "<p><strong>Имя:</strong> ".$username."</p>\r\n";
$msg .= "<p><strong>Номер телефона:</strong> ".$userphone."</p>\r\n";
$msg .= "<p><strong>Почта:</strong> ".$usermail."</p>\r\n";
$msg .= "<p><strong>Сообщение:</strong> ".$content."</p>\r\n";
$msg .= "</body></html>";
 
// отправка сообщения
if(@mail($sendto, $subject, $msg, $headers)) {
    echo "true";
} else {
    echo "false";
}
 
?>

Версия Adobedreamweaver - CS4.

Попробовал заменить регулярное выражение другим подобным, а именно: /^[^\s()<>@,;:\/]+@\w[\w\.-]+\.[a-z]{2,}$/i
В результате закрывающий тэг становится, также, как и открывающий, красным тэгом и Dreamweaver не показывает синтаксической ошибки (уже прогресс), но скрипт, по-прежнему не работает. То есть, при нажатии на кнопку "Отправить" ничего не происходит, просто поля формы очищаются от введённых символов и всё.


Сообщение отредактировал BaNru: 03 Ноябрь 2017 в 22:49
Поправлено оформление сообщения

  • 0

#9 Volly

Volly

    Увлеченный

  • Участник
  • 96
    468 сообщ.

Отправлено 03 Ноябрь 2017 в 23:36

В строке <form id="contact" action="#" method="post" name="contact">

вот этим action="#" указано ничего никуда не посылать.

А надо вызвать обработчик-посылатель почты - это файл с php-скриптом

т. е. <form id="contact" action="обработчик-посылатель_почты.php" method="post" name="contact">


  • 0

#10 BaNru

BaNru

    Пацифизжу

  • суперМодератор
  • 980
    3 504 сообщ.

Отправлено 04 Ноябрь 2017 в 00:06


вот этим action="#" указано ничего никуда не посылать.

Но ведь обработчик может быть в этом же файле :dry:

 

Знаю это не этот случай, но надо делать сноски.


  • 0

#11 Volly

Volly

    Увлеченный

  • Участник
  • 96
    468 сообщ.

Отправлено 04 Ноябрь 2017 в 01:39

обработчик может быть в этом же файле
Правильное замечание, согласен.
  • 0



Похожие темы Свернуть

Статистика

Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 скрытых пользователей