沒有刷新的PHP電子郵件表格頁面

我正在嘗試設置我的頁面，以便在提交表單時顯示電子郵件和消息而不刷新頁面。沒有刷新的PHP電子郵件表格頁面

我試圖做到這一點使用jQuery /阿賈克斯，但是我不能讓現在

發送沒有阿賈克斯/ jQuery的任何電子郵件，PHP的工作得很好，但只是不包含刷新功能

任何幫助，將不勝感激

PHP（submitForm.php）：

<?php 

    $name = isset($_POST['name']); 
    $email = isset($_POST['email']); 
    $phone = isset($_POST['phone']); 
    $message = isset($_POST['message']); 
    $feedback = ''; 

if($name && $email && $phone && $message) { 
    $name = ($_POST['name']); 
    $email = ($_POST['email']); 
    $phone = ($_POST['phone']); 
    $message = ($_POST['message']); 
} 

    $to = "[email protected]"; 
    $subject = 'Soni Repairs - Support Request'; 

    $body = <<<EMAIL 

Hi There! 

My name is $name. 

Message: $message. 

My email is: $email 
Phone Number: $phone 

Kind Regards 
EMAIL; 

$header = "From: $email"; 

if($_POST) { 
    if($name == '' || $email == '' || $phone == '' || $message == '') { 
     $feedback = "Nothing received!"; 
    } 
    else { 
     mail($to, $subject, $body, $header); 
     $feedback = '*Message Received! You will receive a reply shortly!'; 
    } 
} 

?>

的jQuery/AJAX：

function submitForm() { 
       var name=document.getElementById('name').value; 
       var dataString = 'name'+ name; 

       $.ajax({ 

        type:"post", 
        url:"submitForm.php", 
        cache:false, 
        success: function(html) { 
         $('#feedback').html(html); 
        } 

       }); 
       return false; 
      }

FORM：

<form id="contact" action="#"> 
          <h3>Get in Touch:</h3> 
          <h4><span id="star" class="glyphicon glyphicon-asterisk"></span>We aim to reply within 24 hours!</h4> 
          <fieldset> 
           <input name="name" placeholder="Your Name" type="text" tabindex="1" required> 
          </fieldset> 
          <fieldset> 
           <input name="email" placeholder="Your Email Address" type="email" tabindex="2" required> 
          </fieldset> 
          <fieldset> 
           <input name="phone" placeholder="Your Phone Number" type="tel" tabindex="3" required> 
          </fieldset> 
          <fieldset> 
           <textarea id="textarea" name="message" placeholder="Describe your problem...." tabindex="5" required></textarea> 
          </fieldset> 
          <fieldset> 
           <button name="submit" type="submit" id="contact-submit submitBtn" data-submit="...Sending" "return submitForm();">Submit</button> 
          </fieldset> 
         </form>

來源

2015-06-14 RandomMath

你的表單在哪裏？ – Rasclatt

你做了什麼調試。您應該至少能夠確定錯誤是在您的JavaScript或PHP代碼 –

@Rasclatt - 對不起，我以爲我包括表格 - 現在添加 – RandomMath

問題：

如果使用document.getElementById您必須使用ID在你的元素
將數據添加到您的Ajax請求

HTML：

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script> 
$(document).ready(function(){ 

    $("#submitBtn").click(function(event) { 
    alert('pressed'); 
     //values 
     var name=document.getElementById('name').value; 
     var email=document.getElementById('email').value; 
     var phone=document.getElementById('phone').value; 
     var message=document.getElementById('message').value; 
     var dataString = {"name": name, "email":email, "phone": phone, "message":message} 

     $.ajax({ 
      type:"post", 
      url:"submitForm.php", 
      data: dataString, 
      success: function(html) { 
       $('#feedback').html(html); 
      } 
     }); 
     event.preventDefault(); 
    }); 
}); 
</script> 
</head> 
<body> 
<form id="contact" method="POST"> 
    <h3>Get in Touch:</h3> 
    <h4><span id="star" class="glyphicon glyphicon-asterisk"></span>We aim to reply within 24 hours!</h4> 
    <fieldset> 
     <input id="name" placeholder="Your Name" type="text" tabindex="1" required> 
    </fieldset> 
    <fieldset> 
     <input id="email" placeholder="Your Email Address" type="email" tabindex="2" required> 
    </fieldset> 
    <fieldset> 
     <input id="phone" placeholder="Your Phone Number" type="tel" tabindex="3" required> 
    </fieldset> 
    <fieldset> 
     <textarea id="message" placeholder="Describe your problem...." tabindex="5" required></textarea> 
    </fieldset> 
    <fieldset> 
     <button name="submit" id="submitBtn">Submit</button> 
    </fieldset> 
</form> 
<div id="feedback"></div> 
</body> 
</html>

PHP

<?php 
if(isset($_POST['name'], $_POST['email'], $_POST['phone'], $_POST['message'])){ 
    //Post data 
    $name = $_POST['name']; 
    $email = $_POST['email']; 
    $phone = $_POST['phone']; 
    $message = $_POST['message']; 
    //mail settings 
    $to = "[email protected]"; 
    $subject = 'Soni Repairs - Support Request'; 
    $body = <<<EMAIL 

Hi There! 

My name is $name. 

Message: $message. 

My email is: $email 
Phone Number: $phone 

Kind Regards 
EMAIL; 

    if(mail($to, $subject, $body, $header)){ 
     $feedback = '*Message sent! You will receive a reply shortly!'; 
    }else{ 
     $feedback = '*Message failed to send'; 
    } 
}else{ 
    $feedback = 'Missing Params'; 
} 

echo $feedback;

來源

2015-06-14 14:01:34 meda

我仍然不斷刷新我似乎弄不明白：/ – RandomMath

php代碼是在它自己的文件，我已經刪除了行動和我沒有得到任何電子郵件 – RandomMath

它已經過測試，它是否從你身邊工作？由於一個奇怪的原因，我仍然得到刷新 – RandomMath

我沒有看到你發送的數據PHP文件在您AJAX代碼的任何地方

注：如果要發送所有表單數據，請使用serialize()函數。否則單獨發送它像

var formDatas = {name:"name",email:"emailID"}; 


function submitForm() { 
     var name=document.getElementById('name').value; 
     var dataString = 'name'+ name; 
     var formDatas = $('#formID').serialize(); // Send form data 
     $.ajax({ 
      type:"post", 
      url:"submitForm.php", 
      data : {datas : formDatas } 
      cache:false, 
      success: function(html) { 
       $('#feedback').html(html); 
      } 

      }); 
    return false; 
}

你引用

來源

2015-06-14 13:54:33 Abhinav

我測試過這段代碼，但是我發現頁面還在刷新？ – RandomMath

我不認爲你通過ajax發送數據..你真的要檢查那 – Abhinav

這是你的阿賈克斯，在那裏你出錯了

$.ajax({ 
    type:"post", 
    url:"submitForm.php", 
    cache:false, 
    success: function(html) { 
     $('#feedback').html(html); 
    } 
});

你忘了，包括對數據進行公佈

$.ajax({ 
    type:"post", 
    url:"submitForm.php", 
    cache:false, 
    data { 
     name: $('#name').val(), 
     email: $('#email').val(), 
     phone: $('#phone').val(), 
     message: $('#msg').val() 
    } 
    success: function(html) { 
     $('#feedback').html(html); 
    } 
});

的關鍵name，email，message和phone須如;因爲您使用了$_POST['name'],$_POST['email'],$_POST['message']和$_POST['phone']。

$('#name').val()，$('#email').val()，$('#phone').val()，$('#message').val()已經做出假設你輸入元素有ID name，email，分別message和phone的電話。 JS使用ID而不是名稱。

有關更多詳細信息，請參閱jQuery Ajax documentation。

來源

2015-06-14 14:04:31

沒有刷新的PHP電子郵件表格頁面

回答

相關問題