表单确认消息 ajax/jquery

Question

可能很累，但我不能做我想做的事。

在用户单击提交按钮（然后发送到我的电子邮件）后，我想要一个确认文本，如“感谢您提交此表单”。这是一个单页网站。 我知道我必须使用一些 jQuery、一些 ajax（因为不重新加载页面对吗？）和我的表单的 php 脚本；将表格中填写的值发送到我的电子邮件。 （

有什么帮助吗？我已经得到了另一种形式，它也在工作。但那里不需要确认消息。

这是我到目前为止得到的，但似乎不起作用..

在我的 index.php 的顶部

<?php
if(isset($_POST['submitReserv'])){

        $sujet = 'stuff - reservation';
        $monEmail = 'email@email.com'; <- my mail
        $headers ='From: '.$reservNom.'<email@email.com>';

        foreach ($_POST as $key => $value) {
            $message.=$key.' -> '.$value.'
';

 }

if(isset($_POST['lieu'])) 
 { 
       echo htmlentities($_POST['lieu']); 
 } 
if(isset($_POST['ambiance'])) 
 { 
       echo htmlentities($_POST['ambiance']); 
 } 
 if(isset($_POST['menu'])) 
 { 
       echo htmlentities($_POST['menu']); 
 } 


    // ini_set('sendmail_from', $email); 
    mail($monEmail, $sujet, $message, $headers);


}

?>

表单的所有 div

<div id="form-reserv" class="page">

<div class="container">

    <!-- Title Page -->
    <div class="row">
        <div class="span12">
            <div class="title-page">
                <h2 class="title">Réservations</h2>
                <h3 class="title-description">Reservez sur internet vos <a href="#">dates</a>.</h3>
            </div>
        </div>
    </div>
    <!-- End Title Page -->

    <div class="row">
        <div class="span12">
            <form id="reserv-form" class="nl-form contact-form" method="post">
                <p>J'aimerais manger au/à 
                <select name="lieux">
                    <option value="null" selected>(cliquez ici)</option>
                    <option value="Parc">PdC</option>
                    <option value="Mont">MdA</option>
                    <option value="GP">GP</option>
                </select></p>
                <p>avec l'ambiance
                <select name="ambiance">
                    <option value="null" selected>(cliquez ici)</option>
                    <option value="Paradise">Paradise</option>
                    <option value="Heat">Heat</option>
                    <option value="Nature">Nature</option>

                </select></p>
                <p>et le menu
                <select name="menu">
                    <option value="null" selected>(cliquez ici)</option>
                    <option value="MP">Manneken Pies</option>
                    <option value="Atomnium">Atomnium</option>
                    <option value="Horta">Horta</option>
                </select></p>

            <br/>

                <p class="contact-name">
                    <input id="reservNom" type="text" placeholder="Votre nom" value="" name="reservNom" />
                </p>
                 <p class="contact-name">
                    <input id="reservPrenom" type="text" placeholder="Votre Prénom" value="" name="reservPrenom" />
                </p>
                <p class="contact-email">
                    <input id="reservEmail" type="text" placeholder="Votre E-mail" value="" name="reservEmail" />
                </p>
                <p class="contact-name">
                    <input id="nombre" type="text" placeholder="Nombre de personnes (Maximum 4 personnes)" max="4" name="nombre" />
                </p>
                <p class="contact-name">
                    <input id="date" type="date" placeholder="Format : JJ/MM/AAAA" step="6"/>
                </p>
                <p><input value="RESERVEZ" class="submit" id="submitReserv" name="submitReserv" type="submit">
                 </p>

                   <div id="response">
                    </div

            </form>

        </div>

    </div>
</div>

那么，我想在哪里写更多内容？仍然需要的是有这个确认文本。我的 _includes/js 目录中有一个 main.js .. 对不起，我现在不太擅长 js 和 ajax。 我会很感激你帮助我！ 谢谢大家！

---

编辑 - 这是我的一个页面中的另一种形式，但不是我拥有的那个。

BRUSHED.contactForm = function(){
$("#contact-submit").on('click',function() {
    $contact_form = $('#contact-form');

    var fields = $contact_form.serialize();

    $.ajax({
        type: "POST",
        url: "_include/php/contact.php",
        data: fields,
        dataType: 'json',
        success: function(response) {

            if(response.status){
                $('#contact-form input').val('');
                $('#contact-form textarea').val('');
            }

            $('#response').empty().html(response.html);
        }
    });
    return false;
});

}

Answer 1

您可以在提交按钮上使用非常简单的 JavaScript 确认框

<p><input value="RESERVEZ" class="submit" id="submitReserv" name="submitReserv" type="submit" onClick="if(!confirm('Thanks for sumbitting this form')){ return false; }">
             </p>

希望这对你有用。

Answer 2

如果您只想在提交返回成功时提供一条消息，那么您已经有了答案。您可以在 $.ajax() 调用的成功回调中做任何您想做的事情。这是您的 js 的简化版本，应该可以满足您的需求

  $.ajax({
    type: "POST",
    url: //your url here,
    data: fields,
    dataType: 'json',
    success: function(response) {

        $('#reserv-form').parent().append("<div>Thanks for submitting this form</div>")
    }
  });