連絡先フォームに成功/失敗のメッセージを表示する方法

Question

連絡先フォームでメッセージが送信されたかどうかを簡単に把握しようとしています。成功または失敗時には、指定された成功または失敗のページにリダイレクトされます。私がやってみたいのは、リダイレクトの代わりに、divやモーダルやポップアップを表示するだけですが、PHPでそれを行う方法がわかりません。

フォーム：

<div class="col-lg-7 col-sm-7 contactboxform"> 
    <form action="contact_me.php" method="POST" id="contactform"> 
     <input type="text" name="name" placeholder="Name..." class="input-text"> 
     <input type="text" name="phone" placeholder="Phone Number..." class="input-text"> 
     <input type="email" name="email" placeholder="E-mail Address..." class="input-text"> 
     <input type="checkbox" name="interested"> 
     <textarea name="message" placeholder="What would you like to say?" class="input-text text-area" rows="7"></textarea> 
     <button type="submit" id="subbtn" class="btn btn-default btn-lg">Submit</button> 
    </form> 
    </div> 

はPHP：

// send email 
if (!empty($name) && !empty($email) && !empty($phone) && !empty($message)) { 
    $success = mail($emailTo, $subject, $body, "From: <$emailFrom>"); 
} 
if ($success){ 
    header('Location: success.html'); 
} 
else { 
    header('Location: failed.html'); 
} 
//redirect to success page 

だから私はちょうど適切に成功した場合に、特定のdiv /ポップアップを示すことがPHPで言うするかどうかはわかりません。事前

Answer 1

で

ありがとうございますdivを作成し、それにAJAX要求からの応答を挿入してみてください。例えば

、あなたのHTMLコードに追加：submitボタンをクリックすると

<div id="form_status"></div> 

、あなたはAJAXリクエストを実行します。

<button type="submit" id="subbtn" class="btn btn-default btn-lg" onClick="validateForm();">Submit</button> 

そしてvalidateForm機能が使用できます

function validateForm() 
{ 
    var status = $('div#form_status'); 
    var form = $('form#contactform'); 
    $.ajax({ 
     url: 'your-php-file.php?'+form.serialize() 
    }).done(function(data){ 
     status.html(data); 
    }); 
} 

your-php-file.phpには、フォームwiからすべてのデータにアクセスできますth $_GET['input_name']であり、input_nameはフォーム上の入力のnameである。

your-php-file.phpに印刷したものは、div#form_statusに印刷され、ページを更新する必要はありません。