За последние 24 часа нас посетили 16889 программистов и 1312 роботов. Сейчас ищут 1452 программиста ...

Создание формы на html-странице. Нет реакции скрипта - обработчика формы.

Тема в разделе "HTML и CSS", создана пользователем Pavl, 3 ноя 2017.

  1. Pavl

    Pavl Новичок

    С нами с:
    3 ноя 2017
    Сообщения:
    44
    Симпатии:
    0
    Добрый день!
    Создал html-страницу. Затем вставил в эту страницу html-форму. Осталось, только прикрепить обработчик формы для проверки ввода э-мейла. Вставил скрипт, но html-страница на него никак не реагирует. помогите разобраться - почему?
    Код html-страницы:
    HTML:
    1. <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    2. <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    3. <script type="text/javascript" src="js/jquery.maskedinput.js"></script>
    4. <script type="text/javascript">
    5. jQuery(function($){
    6.    $("#phone").mask("+7 (999) 999-9999");
    7.    $("#phone2").mask("+7 (999) 999-9999");
    8. });
    9. </head>
    10. <div id="inline">
    11. <h2>Онлайн заявка</h2>
    12. <form id="contact" action="#" method="post" name="contact">
    13. <input id="name" class="txt" name="name" type="name" placeholder="Ваше имя" />
    14. <input id="phone" class="txt" name="phone" type="phone" placeholder="Ваш телефон" />
    15. <input id="email" class="txt" name="email" type="email" placeholder="Ваш e-mail" />
    16. <textarea id="msg" class="txtarea" name="msg" placeholder="Ваше сообщение:"></textarea>
    17. <button id="send">Отправить</button>
    18. </form>
    19. </div>
    20.  
    21.  
    22. <script type="text/javascript">
    23.   function validateEmail(email) {
    24.     var reg = /^[^\s()<>@,;:\/]+@\w[\w\.-]+\.[a-z]{2,}$/i;
    25.     return reg.test(email);
    26.   }
    27.   $(document).ready(function() {
    28.     $(".modalbox").fancybox();
    29.     $("#contact").submit(function() { return false; });
    30.     $("#send").on("click", function(){
    31.       var emailval  = $("#email").val();
    32.       var namevl  = $("#name").val();
    33.       var phonevl  = $("#phone").val();
    34.       var msgval    = $("#msg").val();
    35.       var msglen    = msgval.length;
    36.       var mailvalid = validateEmail(emailval);
    37.       if(mailvalid == false) {
    38.         $("#email").addClass("error");
    39.       }
    40.       else if(mailvalid == true){
    41.         $("#email").removeClass("error");
    42.       }
    43.   if(mailvalid == false) {
    44.         $("#name").addClass("error");
    45.       }
    46.       else if(mailvalid == true){
    47.         $("#name").removeClass("error");
    48.       }
    49.       if(mailvalid == false) {
    50.         $("#phone").addClass("error");
    51.       }
    52.       else if(mailvalid == true){
    53.         $("#phone").removeClass("error");
    54.       }
    55.       if(msglen < 4) {
    56.        $("#msg").addClass("error");
    57.      }
    58.      else if(msglen >= 4){
    59.         $("#msg").removeClass("error");
    60.       }
    61.      
    62.       if(mailvalid == true && msglen >= 4) {
    63.        // если обе проверки пройдены
    64.        // сначала мы скрываем кнопку отправки
    65.        $("#send").replaceWith("<em>отправить...</em>");
    66.         $.ajax({
    67.           type: 'POST',
    68.           url: 'sendmessage.php',
    69.           data: $("#contact").serialize(),
    70.           success: function(data) {
    71.             if(data == "true") {
    72.               $("#contact").fadeOut("fast", function(){
    73.                 $(this).before("<p><strong>Успешно! Ваше сообщение отправлено  :)</strong></p>");
    74.                 setTimeout("$.fancybox.close()", 1000);
    75.               });
    76.             }
    77.           }
    78.         });
    79.       }
    80.     });
    81.   });
    82. </body>
    83. </html>
    php-код обработчика формы:
    PHP:
    1. <?php
    2. $sendto   = "pochta@mail.ru"; // Обязательно измените e-mail на свой
    3. $usermail = $_POST['email'];
    4. $username = $_POST['name'];
    5. $userphone = $_POST['phone'];
    6. $content  = nl2br($_POST['msg']);
    7. // Формирование заголовка письма
    8. $subject  = "Новое сообщение";
    9. $headers  = "From: " . strip_tags($usermail) . "\r\n";
    10. $headers .= "Reply-To: ". strip_tags($usermail) . "\r\n";
    11. $headers .= "MIME-Version: 1.0\r\n";
    12. $headers .= "Content-Type: text/html;charset=utf-8 \r\n";
    13. // Формирование тела письма
    14. $msg  = "<html><body style='font-family:Arial,sans-serif;'>";
    15. $msg .= "<h2 style='font-weight:bold;border-bottom:1px dotted #ccc;'>Новое сообщение</h2>\r\n";
    16. $msg .= "<p><strong>Имя:</strong> ".$username."</p>\r\n";
    17. $msg .= "<p><strong>Номер телефона:</strong> ".$userphone."</p>\r\n";
    18. $msg .= "<p><strong>Почта:</strong> ".$usermail."</p>\r\n";
    19. $msg .= "<p><strong>Сообщение:</strong> ".$content."</p>\r\n";
    20. $msg .= "</body></html>";
    21.  
    22. // отправка сообщения
    23. if(@mail($sendto, $subject, $msg, $headers)) {
    24.     echo "true";
    25. } else {
    26.     echo "false";
    27. }
    28.  
    29. ?>
     
  2. MouseZver

    MouseZver Суперстар

    С нами с:
    1 апр 2013
    Сообщения:
    7.794
    Симпатии:
    1.331
    Адрес:
    Лень
    проверка у клиента бессмысленна.
    --- Добавлено ---
    абсолютный путь прописывай
    url: 'sendmessage.php',
     
    Pavl нравится это.
  3. Pavl

    Pavl Новичок

    С нами с:
    3 ноя 2017
    Сообщения:
    44
    Симпатии:
    0
    Да, тоже складывается такое ощущение, но я не понимаю, почему? Этот код заимствован в одном из интернет-уроков и там, вроде как, всё гладко... Но, у меня, почему-то нет.
     
  4. Fell-x27

    Fell-x27 Суперстар
    Команда форума Модератор

    С нами с:
    25 июл 2013
    Сообщения:
    12.156
    Симпатии:
    1.770
    Адрес:
    :сердА
    Потому что надо не заимствовать, а понимать, что делаешь.
     
    Pavl нравится это.