2016-11-25 16 views
0

私はPHPの機能を実行することによって、私のhtmlページからメールを送信していますを使用して、私のindex.htmlを(メールは、POSTメソッドをPHPにします) メールを送信し、AjaxとjQueryの

<?php 
if($_POST['send'] == 'SEND'){ 

$to  = '[email protected]'; 
$subject = $_POST['subject']; 
$message = $_POST['message']; 
$headers = "From: ".$_POST['sender_nam‌​e​']." <".$_POST['sender_em‌​ail‌​'].">\r\n"; $headers = "Reply-To: ".$_POST['sender_ema‌​il‌​']."\r\n"; 
$headers = "Content-type: text/html; charset=iso-8859-1\r\n"; 
'X-Mailer: PHP/' . phpversion(); 
mail($to, $subject, $message, $headers); 
} 
?> 

私はこのquestion &このquestion

012によると、現在のページ上で、そのために上記の方法を実行したい上記の作業をされて罰金が、そのも残して現在のページ私は使用する必要があります AjaxjQuery?どのように私はそれを動作させることができ、私は上記の知っている

////in my index.html 
<button type="button">send mail</button> 
<p></p> 
<script type="text/javascript"> 



    $(document).ready(function(){ 
     $("button").click(function(){ 

      $.ajax({ 
       type: 'POST', 
       url: 'sendmail.php', 
       success: function(data) { 
        alert(data) 
        $("l").text(data); 

       } 
      }); 
    }); 
}); 
</script> 

は、そのは、(ポップアップで現在、上映sendmail.phpのテキストを)動作していない&正しくないので、私が:そして私はこれを持って、これまでにそれらについて何も知りませんsendmail.phpを実行できますか?

UPDATE:

index.htmlを

<form method="POST" id="myForm" action="sendmail.php"> 
    <input type="text" name="sender_name" placeholder="Name" required=""> 
    <input type="text" name="sender_email" placeholder="Email" required=""> 
    <input type="text" name="subject" placeholder="Subject" required=""> 
    <textarea placeholder="Message" name="message" required=""></textarea> 
    <input type="submit" name="send" value="SEND"> 
</form> 



</div> 
<script type="text/javascript"> 


    $(document).ready(function(){ 
     $("#myForm").on('submit', function(){ 
      var formData = $(this).serialize(); 
      $.ajax({ 
       type: 'POST', 
       url: 'sendmail.php', 
       data: formData, 
       success: function(response.success) { 
        alert(response.success) 
        $("l").text(response.success); 

       } 
      }); 
    }); 
</script> 
    ` 

答えて

4

下のあなたは.on('submit'.serialize()を使用してのために働く必要があり

HTML

<form method="POST" id="myForm" action="sendmail.php"> 
    <input type="text" name="sender_name" placeholder="Name" required=""> 
    <input type="text" name="sender_email" placeholder="Email" required=""> 
    <input type="text" name="subject" placeholder="Subject" required=""> 
    <textarea placeholder="Message" name="message" required=""></textarea> 
    <input type="submit" name="send" value="SEND"> 
</form> 

JS

$(document).ready(function() { 
    $("#myForm").on('submit', function(event) { 
     event.preventDefault(); 
     var formData = $(this).serialize(); 
     $.ajax({ 
      type: 'POST', 
      url: 'sendmail.php', 
      dataType: "json", 
      data: formData, 
      success: function(response) { 
       alert(response.success); 
      }, 
      error: function(xhr, status, error){ 
       console.log(xhr); 
      } 
     }); 
    }); 
}); 

PHP

<?php 
if(isset($_POST['message'])){ 
    $to  = '[email protected]'; 
    $subject = $_POST['subject']; 
    $message = $_POST['message']; 
    $headers = "From: ".$_POST['sender_nam‌​e​']." <".$_POST['sender_em‌​ail‌​'].">\r\n"; $headers = "Reply-To: ".$_POST['sender_ema‌​il‌​']."\r\n"; 
    $headers = "Content-type: text/html; charset=iso-8859-1\r\n"; 
    'X-Mailer: PHP/' . phpversion(); 
    if(mail($to, $subject, $message, $headers)) echo json_encode(['success'=>true]); 
    else echo json_encode(['success'=>false]); 
    exit; 
} 
?> 
+0

が、これは私はそれを行うことになってるかですか?更新された質問 –

+0

を確認してください@remyboysええ、これはあなたの使用のために動作するはずです。何か問題がありますか、エラーが出ますか? – DelightedD0D

+0

@remyboysは、上記のように 'function(event){event.preventDefault();'ビットを必ず追加してください。最初に答えを追加したが、 – DelightedD0D

3
<form id="my_form" method="POST" action="sendmail.php" > 
<input type="text" name="sender_name" placeholder="Name" required=""> 
<input type="text" name="sender_email" placeholder="Email" required=""> 
<input type="text" name="subject" placeholder="Subject" required=""> 
<textarea placeholder="Message" name="message" required=""></textarea> 
    <input id="my_button" type="button" name="send" value="SEND"> 
</form> 

jQueryのコード

$(document).ready(function(){ 
     $("#my_button").click(function(){ 

      $.ajax({ 
       type: 'POST', 
       url: 'sendmail.php', 
       data : $('#my_form').serialize(), 
       success: function(data) { 

       } 
      }); 
    }); 

PHPコード

<?php 

$searcharray = array(); 
parse_str($_POST['data'], $searcharray); 
if($searcharray['send'] == 'SEND'){ 

$to  = '[email protected]'; 
$subject = $searcharray['subject']; 
$message = $searcharray['message']; 
$headers = "From: ".$searcharray['sender_nam‌​e​']." <".$searcharray['sender_em‌​ail‌​'].">\r\n"; 
$headers .= "Reply-To: ".$searcharray['sender_ema‌​il‌​']."\r\n"; 
$headers .= "Content-type: text/html; charset=iso-8859-1\r\n"; 
$headers .= 'X-Mailer: PHP/' . phpversion(); 
mail($to, $subject, $message, $headers); 
} 
2

したがって、次のコードのようにフォームタグのIDを指定します。

<form method="POST" action="sendmail.php" id="sendForm"> 
<input type="text" name="sender_name" placeholder="Name" required=""> 
<input type="text" name="sender_email" placeholder="Email" required=""> 
<input type="text" name="subject" placeholder="Subject" required=""> 
<textarea placeholder="Message" name="message" required=""> 
</textarea> 
<input type="submit" name="send" value="SEND" id="submitButton">  
</form> 

その後idと、使用

$(document).ready(function(){ 
     $("#submitButton").click(function(event){ 
     event.preventDefault(); 
     var datas = $('#sendForm').serialize(); 

      $.ajax({ 
       type: 'POST', 
       url: 'sendmail.php', 
       data: datas, 

       success: function(data) { 
        alert(data) 
        $("l").text(data); 

       } 
      }); 
    }); 
}); 

確認フォームを与えるアヤックス

+0

いけない 'event.preventDefault()を呼び出すことを忘れ見てください;'またはHTMLフォームは、通常の工程を経て提出されるとAjaxが呼び出される前に、ページが更新されます。)確か – DelightedD0D

+1

を。ご連絡ありがとうございました –

2

こんにちはを使用してフォームデータを送信する方法については、このurl次のコードのようなスクリプトを更新JSpreventDefault()

<form method="POST" id="myForm" action="sendmail.php"> 
    <input type="text" name="sender_name" placeholder="Name" required=""> 
    <input type="text" name="sender_email" placeholder="Email" required=""> 
    <input type="text" name="subject" placeholder="Subject" required=""> 
    <textarea placeholder="Message" name="message" required=""></textarea> 
    <input type="submit" id="sendMail" name="send" value="SEND"> 
</form> 

sendmail。PHP

<?php 
    if($_POST['send'] == 'SEND'){ 

    $to  = '[email protected]'; 
    $subject = $_POST['subject']; 
    $message = $_POST['message']; 
    $headers = "From: ".$_POST['sender_nam‌​e​']." <".$_POST['sender_em‌​ail‌​'].">\r\n"; $headers = "Reply-To: ".$_POST['sender_ema‌​il‌​']."\r\n"; 
    $headers = "Content-type: text/html; charset=iso-8859-1\r\n"; 
    'X-Mailer: PHP/' . phpversion(); 
    //check if the mail was sent 
    if (mail($to, $subject, $message, $headers)) { 
     echo json_encode(['result' => true]); 
    }else { 
     echo json_encode(['result' => false]); 
    } 
    } 
?> 

jQueryの

$(document).ready(function() { 
//send button click 
$('#sendMail').on('click', function (e) { 
    e.preventDefault(); 
    $.post('sendmail.php', $('#myForm').serialize(), function (data) { 
     //show the results if the mail was sent or not 
     var res = $.parseJSON(data); 
     if (res.result === true) { 
      $('#feedback').html('your mail was sent'); 
     }else { 
      $('#feedback').html('your mail was not sent'); 
     } 
    }); 
}); 
}); 
関連する問題