gpt4 book ai didi

php - 在同一页面上显示提交的表单回复。 (没有重装)

转载 作者:可可西里 更新时间:2023-11-01 12:46:55 25 4
gpt4 key购买 nike

我将如何显示提交的联系表单的回复(在表单下方的同一页面上)而不是在提交后将用户发送到新页面?

我见过一些人创建一个 div 元素,然后将收到的响应放入其中。这是推荐的方法吗?

这是我目前所拥有的:

PHP:

<?php

$name =$_GET['name'];
$email =$_GET['name'];
$message =$_GET['name'];

$to = "support@loaidesign.co.uk";
$subject = "";
$message = "";
$headers = "From: $email";

if(mail($to,$subject,$message,$headers))
{
echo "<h2>Thank you for your comment</h2>";
}
else{
echo "<h2>Sorry, there has been an error</2>";
}

?>

这是 HTML:

<div class="wrapperB">
<div class="content">
<form id="contactForm" action="assets/email.php" method="get">

<label for="name">Your Name</label>
<input name="name" id="name" type="text" required placeholder="Please enter your name">

<label for="email">Email Address</label>
<input name="email" id="email" type="email" required placeholder="Please enter your email address here">

<label for="message">Message</label>
<textarea name="message" id="message" required></textarea>

<button id="submit" type="submit">Send</button>
</form>
</div>
</div>
</div>

最佳答案

这是一个使用 suggested example from the JQuery site 的工作示例和 pajaja's 回答。

解决方案:

将其放在 <head> 您的网页。

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

下载 JQuery 并以同样的方式包含它。

表格:

您的联系表格保持不变。

<form id="contactForm" action="assets/email.php" Method="POST">
<label for="name">Your Name</label>
<input name="name" type="text" required placeholder="Please enter your name">

<label for="email">Email Address</label>
<input name="email" type="email" required placeholder="Please enter your email address here">

<label for="message">Message</label>
<textarea name="message" required></textarea>

<button type="submit">Send</button>
</form>

返回数据:

在正文中您想要的位置添加您的响应元素。

<div id="contactResponse"></div>

Javascript:

现在放置(最好在 </body> 之前)javascript 代码:

<script>
$("#contactForm").submit(function(event)
{
/* stop form from submitting normally */
event.preventDefault();

/* get some values from elements on the page: */
var $form = $( this ),
$submit = $form.find( 'button[type="submit"]' ),
name_value = $form.find( 'input[name="name"]' ).val(),
email_value = $form.find( 'input[name="email"]' ).val(),
message_value = $form.find( 'textarea[name="message"]' ).val(),
url = $form.attr('action');

/* Send the data using post */
var posting = $.post( url, {
name: name_value,
email: email_value,
message: message_value
});

posting.done(function( data )
{
/* Put the results in a div */
$( "#contactResponse" ).html(data);

/* Change the button text. */
$submit.text('Sent, Thank you');

/* Disable the button. */
$submit.attr("disabled", true);
});
});
</script>

ActionScript :

您的联系人(PHP) 文件保持不变,但将 $_GET 更改为 $_POST:

<?php

$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];

$to = "xxx@xxx.xxx";
$subject = "";
$message = "";
$headers = "From: $email";

if( mail($to,$subject,$message,$headers) )
{
echo "<h2>Thank you for your comment</h2>";
}
else
{
echo "<h2>Sorry, there has been an error</h2>";
}

?>

结果:

现在应该在提交时从表单发送数据,然后在 #contactResponse 中显示返回的数据元素。该按钮还会将文本设置为“已发送,谢谢”,同时也会禁用该按钮。

关于php - 在同一页面上显示提交的表单回复。 (没有重装),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18171017/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com