양식 제출에 성공 메시지가 표시되지 않습니다.

Question

메시지가 성공적으로 전자 메일로 발송 되었더라도 성공 표시가없는 연락처 양식에 문제가 있습니다. 제출 단추를 누르면 페이지가 변경되지 않으므로 양식이 사용자에게 표시되지 않습니다. 이 페이지는 Themeforest 템플리트를 사용하여 작성되었지만 작성자는 솔루션을 제공 할 수 없습니다. 나는 누군가가 올바른 방향으로 나를 가리킬 수 있기를 바랬다.

 <form id="contact-form" name="contact-form" action="" method="post"> 
      <label class="contact-label">Name*</label> 
      <input class="contact-input" type="text" name="contact-names" value="" /><br /><span class="name-required"></span> 
      <label class="contact-label">Email*</label> 
      <input class="contact-input" type="text" name="contact-email" value="" /><br /><span class="email-required"></span> 
      <label class="contact-label">Message*</label> 
      <textarea name="comments" rows="2" cols="20" class="contact-commnent"></textarea><br /><span class="comment-required"></span> 
      <input type="submit" value="Send" id="submit-form" class="button lightred contact-submit" /> 
     </form> 

이 파일은 같은 HTML 페이지에 연결되어 :

<?php 


$names = $_POST['names']; 
$email = $_POST['email_address']; 
$comment = $_POST['comment']; 
$to ='to@email.com'; 

$message = ""; 
$message .= "*Name: " . htmlspecialchars($names, ENT_QUOTES) . "<br>\n"; 
$message .= "*Email: " . htmlspecialchars($email, ENT_QUOTES) . "<br>\n"; 
$message .= "*Comments: " . htmlspecialchars($comment, ENT_QUOTES) . "<br>\n"; 
$lowmsg = strtolower($message); 

$headers = "MIME-Version: 1.0\r\nContent-type: text/html; charset=iso-8859-1\r\n"; 
$headers .= "From: \"" . $names . "\" <" . $email . ">\r\n"; 
$headers .= "Reply-To: " . $email . "\r\n"; 
$message = utf8_decode($message); mail($to, "Note from the Contact Form", $message, $headers); 

if ($message){ 
     echo 'sent'; 
}else{ 
     echo 'failed'; 
} 
?> 

이 주식 HTML 코드입니다 : 여기

내가 주어진 주식 '접촉 send.php'파일입니다 잘 : (juery-contact.js) 여기

$(document).ready(function(){ 
    $('#submit-form').click(function(){ 

    var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/; 
    var names    = $('#contact-form [name="contact-names"]').val(); 
    var email_address = $('#contact-form [name="contact-email"]').val(); 
    var comment   = $.trim($('#contact-form .contact-commnent').val()); 
    var data_html ='' ; 


       if(names == ""){ 
        $('.name-required').html('Your name is required.'); 
       }else{ 
        $('.name-required').html(''); 
       } 
       if(email_address == ""){ 
        $('.email-required').html('Your email is required.'); 
       }else if(reg.test(email_address) == false){ 
        $('.email-required').html('Invalid Email Address.'); 
       }else{ 
        $('.email-required').html(''); 
       } 

       if(comment == ""){ 
        $('.comment-required').html('Comment is required.'); 
       }else{ 
        $('.comment-required').html(''); 
       } 

     if(comment != "" && names != "" && reg.test(email_address) != false){ 

      data_html = "names="+ names + "&comment=" + comment + "&email_address="+ email_address; 

      //alert(data_html); 

      $.ajax({ 
        type: 'post', 
        url: 'contact-send.php', 
        data: data_html, 
        success: function(msg){ 
        if (msg == 'sent'){ 
          $('#success').html('Message sent!')  ; 
          $('#contact-form [name="contact-names"]').val(''); 
          $('#contact-form [name="contact-email"]').val(''); 
         $('#contact-form .contact-commnent').val(''); 

         }else{ 
          $('#success').html('Mail Error. Please Try Again.!') ; 
         } 
        } 
      }); 

     } 

     return false; 
    }) 
}) 

은 당신이 그것을 필요로하는 경우에 라이브 사이트 : http://shamrockmasonry.ca/contact.html

도움을 주시면 감사하겠습니다.

Answer 1

나는 소스 코드를 훑어와 '#success'ID를 가진 요소가없는 것으로 나타났습니다.

그래서 요소가 없기 때문에 실제로 존재 할 수없는 요소를 #success하는 HTML 메시지를 추가하는 코드 블록 :

if (msg == 'sent'){ 
    $('#success').html('Message sent!'); 
    $('#contact-form [name="contact-names"]').val(''); 
    $('#contact-form [name="contact-email"]').val(''); 
    $('#contact-form .contact-commnent').val(''); 
}else{ 
    $('#success').html('Mail Error. Please Try Again.!') ; 
} 

는 당신이 제거에 대한 코멘트에서 만든 귀하의 추가 질문에 대답하기 성공적으로 제출 한 후받은 오류 메시지는 다음을 수행하십시오.

여기 예

<span class="email-required error-message"></span> 
<span class="name-required error-message"></span> 
<span class="comment-required error-message"></span> 

처럼, 당신의 범위의 추가적인 클래스를 추가하고 JQuery와 블록에 코드 줄을 추가

if (msg == 'sent'){ 
    $('#success').html('Message sent!'); 
    $('#contact-form [name="contact-names"]').val(''); 
    $('#contact-form [name="contact-email"]').val(''); 
    $('#contact-form .contact-commnent').val(''); 
    $('.error-message').empty(); // clears all of the current error messages on success 
}else{ 
    $('#success').html('Mail Error. Please Try Again.!') ; 
} 

그래서 위의 #success ID를 가진 div 요소를 추가 귀하의 양식 태그와 당신이 잘해야합니다.

희망이 있습니다.

Answer 2

은이어야한다 형태의 HTML

전에 <div id="success"></div>을 추가

<div id="success"></div> 
<form id="contact-form" name="contact-form" action="" method="post"> 
    [...] 
</form>