twitter-bootstrap 提交联系表时显示感谢信息

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/18172406/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 17:55:32  来源:igfitidea点击:

display thank you message when contact form submitted

formstwitter-bootstrapalertcontact

提问by Joe Conlin

Ok, so I've looked on the forum and see similar questions to this, but i'm still not getting anywhere with the code i've pilfered from various pages.

好的,所以我查看了论坛并看到了与此类似的问题,但是我仍然无法使用从各个页面窃取的代码。

I'm using bootstrap css to display a contact form, usual fields, name email, message etc. The action="process.php" which is where I add the user into a mysql database and then email me a confirmation that someone has submitted the form. So all is well on that front, just that I want to display a simple "thank you" message once the form has been submitted, but not by redirecting to another page.

我正在使用 bootstrap css 来显示联系表单、常用字段、名称电子邮件、消息等。 action="process.php" 是我将用户添加到 mysql 数据库的地方,然后通过电子邮件向我发送确认某人已提交表格。所以在这方面一切都很好,只是我想在提交表单后显示一条简单的“谢谢”消息,而不是通过重定向到另一个页面。

I have the following for a message:

我有以下消息:

<!-- thank you message -->
<div id="thanks" class="alert alert-success fade">
  <button href="#" type="button" class="close">&times;</button>
  <h4>Got it!</h4>
  <p>Thanks. I've received your message, I'll be in touch within 24 hours. Promise.</p>
</div>

and then use this js to add the "in" to display it once submitted:

然后使用这个js添加“in”以在提交后显示它:

$('#send_button').click(function () {
    $('#thanks').addClass('in'); 
});

$('.close').click(function () {
    $(this).parent().removeClass('in'); // hides alert with Bootstrap CSS3 implem
});

I briefly see the thank you alert message, but then I get redirected to "process.php" and this doesnt display anything as theres no html within, just the mysql stuff and php mailer. Another point to note, whether this is of interest, I load the contact form initially by ajax so the url is like wdr/index.php#contact

我简要地看到了感谢提醒消息,但随后我被重定向到“process.php”,这并没有显示任何内容,因为里面没有 html,只有 mysql 内容和 php 邮件程序。还有一点要注意,不管这是否有趣,我最初是通过 ajax 加载联系表单的,因此 url 就像 wdr/index.php#contact

Can someone help me finish the code. I'm sure its something simple I'm missing to make this work as it should.

有人可以帮我完成代码。我确定它的一些简单的东西我缺少使这项工作正常进行。

Any help appreciated.

任何帮助表示赞赏。

Col

上校

回答by Joe Conlin

Using Ajax makes it easy. here is what I use for simple sends:

使用 Ajax 很容易。这是我用于简单发送的内容:

The js:

js:

$('#form_id').on('submit', function(e) {
    e.preventDefault(); //Prevents default submit
    var form = $(this); 
    var post_url = form.attr('action'); 
    var post_data = form.serialize(); //Serialized the form data for process.php
    $('#loader', form).html('<img src="../img/forms/loader.gif" /> Please Wait...');
    $.ajax({
        type: 'POST',
        url: 'process.php', // Your form script
        data: post_data,
        success: function(msg) {
            $(form).fadeOut(500, function(){
                form.html(msg).fadeIn();
            });
        }
    });
});

The process.php:

进程.php:

<?php

/* Configuration */
$subject = 'Submission received'; // Set email subject line here
$mailto  = 'your email address'; // Email address to send form submission to
/* END Configuration */

$firstName      = $_POST['firstName'];
$lastName       = $_POST['lastName'];
$email          = $_POST['email'];
$companyName    = $_POST['companyName'];
$phone          = $_POST['phone'];
$callTime       = $_POST['callTime'];
$timestamp = date("F jS Y, h:iA.", time());

// HTML for email to send submission details
$body = "
<br>
<p>The following information was submitted through the contact form on your website:</p>
<p><b>Name</b>: $firstName $lastName<br>
<b>Email</b>: $email<br>
<b>Company name</b>: $companyName<br>
<b>Phone number</b>: $phone (Please call in the <b>$callTime</b>)</p>
<p>This form was submitted on <b>$timestamp</b></p>
";

// Success Message
$success = "
<div class=\"row-fluid\">
    <div class=\"span12\">
        <h3>Submission successful</h3>
        <p>Thank you for taking the time to contact Pacific One Lending. A representative will be in contact with you shortly. If you need immediate assistance or would like to speak to someone now, please feel free to contact us directly at <strong>(619) 890-3605</strong>.</p>
    </div>
</div>
";

$headers = "From: $firstName $lastName <$email> \r\n";
$headers .= "Reply-To: $email \r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
$message = "<html><body>$body</body></html>";

if (mail($mailto, $subject, $message, $headers)) {
    echo "$success"; // success
} else {
    echo 'Form submission failed. Please try again...'; // failure
}

?>