jQuery Форма контакта AJAX во всплывающем окне

Question

Я создаю форму контакта, которая появляется во всплывающем окне jQuery. Когда вы нажимаете кнопку «Отправить», он использует AJAX и PHP-скрипт для отправки электронной почты. Моя проблема в том, что, ну, это не сработает. Он идет вперед и представляет форму как регулярную, и письмо никогда не отправляется. В функции .ajax не вызывается ни функция успеха, ни функция ошибки. Вот мой код:

Всплывающее открывается при нажатии на это: (Эта часть работы)

<a href="mailto:info@visionprintmedia.com" class="email">info@visionprintmedia.com</a> 

JQuery скрипт:

$(function() { 
    $('a.email').click(function(event) { 
     event.preventDefault(); 
     $('body').append('<div id="popupshadow"></div><div id="popup"></div>'); 
     $('#popupshadow').css({opacity:0}).animate({opacity:0.7},1000); 
     $('#popup').css({opacity:0}).delay(1200).animate({opacity:1},800); 
     $('#popup').html('<form class="contact" action="#" method="none"><table class="contact"><tr><td class="input-name">Name:</td><td><input type="text" name="name" size="25" /></td></tr><tr><td class="input-email">Email:</td><td><input type="email" name="email" size="25" /></td></tr><tr><td class="input-phone">Phone:</td><td><input type="phone" name="phone" size="25" /></td></tr><tr><td class="input-message">Message:</td><td><textarea name="message" cols="20" rows="5"></textarea></td></tr><tr><td></td><td><input type="submit" value="Send" /></td></tr></table><input type="hidden" name="to" value="' + $(this).attr('href').slice(7) + '"/></form><a href="mailto:' + $(this).attr('href').slice(7) + '" class="cancel">Send using your own mail program.</a>'); 
     $('form.contact').submit(function(event) { 
      $('form.contact td').css('color','#000000'); 

      var name = $('form.contact input[name="name"]').val(); 
      var email = $('form.contact input[name="email"]').val(); 
      var phone = $('form.contact input[name="phone"]').val(); 
      var message = $('form.contact textarea[name="message"]').val(); 

      var valid = true; 
      if(name == "") { 
       valid = false; 
       $('td.input-name').css('color','#FF0000'); 
      } 
      if(email == "" && phone == "") 
       valid = false; 
      if(email == "") 
       $('td.input-email').css('color','#FF0000'); 
      if(phone == "") 
       $('td.input-phone').css('color','#FF0000'); 
      if(message == "") { 
       valid = false; 
       $('td.input-message').css('color','#FF0000'); 
      } 

      if(valid) { 
       $.ajax({url : 'http://nickentin.com/design/projects/visionprintmedia/js/contact.php', 
         data : {name : name, 
           email : email, 
           phone : phone, 
           message : message, 
           to : to}, 
         type : 'post', 
         success : function(data) { 
          alert("SUCCESS"); 
          $('#popup').html('<p style="text-align:center;">Your message has been sent.</p>'); 
         }, 
         error : function(data) { 
          alert("ERROR"); 
         } 
       }); 
      } 
      event.preventDefault(); 
      return false; 
     }); 
     $('#popupshadow, a.cancel').click(function(event) { 
      $('#popup, #popupshadow').animate({opacity:0},500).delay(500).queue(function() { $(this).remove(); }); 
     }); 
    }); 
}); 

РНР скрипт:

<?php 
    $name = $_POST['name']; 
    $email = $_POST['email']; 
    $phone = $_POST['phone']; 
    $message = $_POST['message']; 

    $to = $_POST['to']; 
    $subject = 'Contact Form - http://visionprintmedia.com'; 

    $message = '<style type="text/css"> 
        #wrap { 
         width:400px; 
         margin:30px auto; 
         border:1px #000000 solid; 
        } 
        header { 
         width:100%; 
         height:50px; 
         display:block; 
        } 
        header h1 { 
         font-size:18px; 
         margin:0px; 
         padding-left:5px; 
         padding-top:15px; 
        } 
        table { 
         width:100%; 
        } 
        table td { 
         vertical-align:text-top; 
        } 
        table td:first-child { 
         width:75px; 
        } 
        a { 
         color:#333333; 
         text-decoration:none; 
        } 
        a:hover { 
         text-decoration:underline; 
        } 
       </style> 
       <div id="wrap"> 
        <header> 
         <h1>Contact Form - http://visionprintmedia.com</h1> 
        </header> 
        <table> 
         <tr><td>Name:</td><td>'.$name.'</td></tr> 
         <tr><td>Email:</td><td>'.$email.'</td></tr> 
         <tr><td>Phone:</td><td>'.$phone.'</td></tr> 
         <tr><td>Message:</td><td>'.$message.'</td></tr> 
        </table> 
        <footer> 
         This message was sent to '.$to.' as part of an automated contact form. If you do not believe that you should have received this email, please forward this message to design@nickentin.com and we will resolve the issue. 
        </footer> 
       </div>'; 

    $headers = 'From: noreply@visionprintmedia.com' . "\r\n" . 
       'Reply-To: ' . $email . "\r\n" . 
       'MIME-Version: 1.0' . "\r\n" . 
       'Content-type: text/html; charset=iso-8859-1' . "\r\n" . 
       'X-Mailer: PHP/' . phpversion(); 

    //mail($to,$subject,$message,$headers); 
    mail('design@nickentin.com',$subject,$message,$headers); // FOR TESTING ONLY 
?> 

У меня есть версия в реальном времени на http://nickentin.com/design/projects/visionprintmedia/contact.html. Просто нажмите на одну из ссылок электронной почты. Благодарю.

Answer 1

Вы должны изменить некоторые вещи здесь:

<form class="contact" action="#" method="none"> 

Заменить как:

<form class="contact" action="" method="post" onsubmit="return false;"> 

Это HTML для формы не должны быть представлены в нормальной форме. Далее, чтобы убедиться, что функция AJAX называется, вам нужно добавить следующее:

<form class="contact" action="" method="post" onsubmit="return postAjax(this);"> 

И в JavaScript функцияpostAjax(form) должна быть определена как:

function postAjax(form) 
{ 
    var post = form.serialize(); 
    // Send the `post` to the server using your AJAX function. 
} 

В вашем PHP скрипт, сделайте это:

if(mail(...)) 
    die("OK"); 
else 
    die("Error! Unable to send mail!"); 

В вашем JavaScript, для этого PHP-кода, используйте это внутри AJAX Re Приемлемая функция:

if(response == "OK") 
    alert("Mail Sent"); 
else 
    alert(response); 

Надеюсь, это вам поможет! :) Всего наилучшего! :)

Answer 2

Вы получаете все поля формы в сообщении. но какова ценность «того», о которой вы упомянули в данных. Вы использовали это в скрипте php . попробуйте дать некоторое значение в форме или удалить этот «$ to = $ _POST ['to'];» в скрипте php.