web-dev-qa-db-ja.com

送信後にHTMLフォームを成功メッセージで置き換えると、フォームは別のphpファイルを使用してメールを送信します

Index.htmlに組み込まれているhtml連絡フォームがあり、次にメールを送信し、JavaScriptを使用するmail.phpファイルがあります。フォームに入力して送信すると、メールを送信するようにコード化され、成功メッセージボックスが表示されて、index.htmlにリダイレクトされます。

ページの更新を回避し、ポップアップメッセージボックスを回避するために、フォームを成功メッセージに置き換えます。

index.htmlからのフォーム：

<form  action="mail.php" method="POST">
    <div class="row uniform">
    <div class="6u 12u$(xsmall)">
        <input type="text" name="name" id="name" value="" placeholder="Name" />
    </div>
    <div class="6u$ 12u$(xsmall)">
        <input type="email" name="email" id="email" value="" placeholder="Email" />
    </div>
    <div class="12u$">
        <!--<div class="select-wrapper">

        </div>-->
    </div>
    <div class="12u$">
        <textarea name="message" id="message" placeholder="Enter your message" rows="6"></textarea>
    </div>
        <center><div class="g-recaptcha" data-sitekey=""></div></center>
    <div class="12u$">
        <ul class="actions">
        <li><input type="submit" value="Send Message" class="special" /></li>
        <li><input type="reset" value="Reset" /></li>
        </ul>
    </div>
    </div>
</form>

phpファイル、メールアドレス、recaptchaトークンは明らかな理由で削除されました：

<?php $name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$formcontent = "From: $name \n email: $email \n Message: $message";
$recipient = 'email address here';
$subject = 'Message from Website';
$mailheader = "From: $email \r\n";
$captcha;
{
  if(isset($_POST['g-recaptcha-response']))
    {
      $captcha=$_POST['g-recaptcha-response'];
    }
  if(!$captcha)
    {
      echo '<script language="javascript">';
      echo 'alert("Please check the Captcha")';
      echo '</script>';
      exit;  
    }
  $response=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=&response=".$captcha."&remoteip=".$_SERVER['REMOTE_ADDR']);
  if($response.success==false)
  {
    echo '<h2>Please do not try and spam here.</h2>';
  }else
  {
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
echo '<script language="javascript">';
echo 'alert("Your Message successfully sent, we will get back to you ASAP.");';
echo 'window.location.href="index.html";';
echo '</script>';
  }
} ?>

これは私が実際に見てきたトピックです：

送信および成功メッセージの後にフォームをクリア

javascriptphphtmlforms
7
Troy

すべてのことを行う最善の方法は、ajaxを使用することです。 HTMLにjqueryを含めます。

ラッパーdiv内にフォームを配置する

<div class="something">
<!-- your form here -->
</div>

基本的なフォーム送信を使用する代わりに、ajaxを介してフォームを送信する

//"idform" is the id of the form
$("#idForm").submit(function() {

    var url = "path/to/your/script.php"; // the script where you handle the form input.

    $.ajax({
           type: "POST",
           url: url,
           // serialize your form's elements.
           data: $("#idForm").serialize(), 
           success: function(data)
           {
               // "something" is the class of your form wrapper
               $('.something').html(data);
           }
         });
    // avoid to execute the actual submit of the form.
    return false;
});

そして、あなたが変更する必要がある最後のものはあなたのphpコードです

成功するためにエコーを1つだけ保持する

echo "Your Message successfully sent, we will get back to you ASAP.";
3
Sumit Pandey

これは、jQueryおよびAjaxフォーム送信を使用して実現できます。

まず、jqueryをヘッド要素に含めます

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>

次に、フォームにIDを指定します

<form  id='mail_form' action="mail.php" method="POST">

Id = 'error'でどこかにスパンを追加します

<span id='error' style='color:red; font-weight:bold;'></span>

Mail.phpを次のように調整します。

<?php 
$success = true;
$errors = array();

$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$formcontent = "From: $name \n email: $email \n Message: $message";
$recipient = 'email address here';
$subject = 'Message from Website';
$mailheader = "From: $email \r\n";
$captcha = false;

  if(isset($_POST['g-recaptcha-response']))
  {
      $captcha=$_POST['g-recaptcha-response'];
  }
  if(!$captcha)
  {
      $success = false;
      array_Push($errors, "Please check the captcha");
  }
  $response=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=&response=".$captcha."&remoteip=".$_SERVER['REMOTE_ADDR']);
  if($response.success==false)
  {
    $success = false;
    array_Push($errors, "Please do not try and spam here.");

  }

if ($success)
{
    mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
}

$output_array = array("success" => $success, "errors" => $errors);
echo json_encode($output_array);
 ?>

次に、ページの下部に追加します

<script>
$('#mail_form').on('submit', function(){
    var dataIn = $(this).serialize(); //serialize turns the form data into a string that can be passed to mail.php. Try doing alert(dataIn); to see what it holds.
    $.post( "./mail.php", dataIn )
        .done(function( dataOut )
        {
        //dataOut holds the response from mail.php. The response would be any html mail.php outputs. I typically echo out json encoded arrays as responses that you can parse here in the jQuery.
        var myArray = JSON.parse(dataOut );
        if (myArray['success'] == true) //Check if it was successfull.
            {
             $("#mail_form").html("Congrats! We just e-mailed you!");
            }
        else //there were errors
           { 
           $('#error').html(""); //Clear error span

            $.each(myArray['errors'], function(i){ 
            $('#error').append(myArray['errors'][i] + "<br>");
           }
        });
return false; //Make sure you do this or it will submit the form and redirect
});
</script>
1
DanielRead

まず、AJAX呼び出しを使用してフォームを送信します。純粋なJSの使用を主張する場合、スクリプトは次のようになります（5秒で作成-おそらく調整が必要です）。

<script>

document.forms['yourForm'].onsubmit = function(form) { // you have to add 'name' attribute to the form and replace 'yourForm' with it
    var data = ... //here you have to get all the values from form elements and store them in data object. to make less changes to the script use the elements' names as object names
    if (window.XMLHttpRequest)
    {
        var xhReq = new XMLHttpRequest();
    }
    else
    {
        var xhReq = new ActiveXObject("Microsoft.XMLHTTP");
    }


    var method= 'POST')
    var async = false; //you can actually set true here, it doesn't matter much in this case
    var url = 'mail.php';
    xhReq.open(method, url, async);
    xhReq.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhReq.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    xhReq.send(data);



    document.getElementById("form's parent's ID goes here").innerHTML = "new content"


    return false;
}
</script>

とにかく表示されないので、phpファイルからすべてのエコーを削除する必要があります。このスクリプトにさらに洗練されたものを追加することもできます。メール機能が正しく機能したかどうか（phpファイルで何かを返し、AJAX応答）を確認するか、キャプチャエラーをキャッチします。また、jQueryで達成するのが非常に簡単です。その道を進んで行くつもりです。

1
kacper3w