[英]Sending email by form without refreshing
Im creating page with parallax scrolling, contact box is in last section. 我正在创建具有视差滚动的页面,联系方式框在最后一节。 If I use simple html + php contact box, page will refresh to first section, so user will have to scroll back to contact section to see result.
如果我使用简单的html + php联系人框,页面将刷新到第一部分,因此用户必须滚动回联系部分才能看到结果。 To correct this I am trying to make script that will send email without reloading page.
为了纠正这个问题,我正在尝试制作将不重新加载页面而发送电子邮件的脚本。 (by Jquery)
(由Jquery提供)
This is how it looks like: 这是它的样子:
HTML: HTML:
<form method="post" enctype="multipart/form-data" id="formularz">
<label for="name">Imię</label><input type="text" name="name" id="formularz_name"/></br></br>
<label for="email">Email</label><input type="text" name="email" id="formularz_email"/></br></br>
<label for="phone">Telefon</label><input type="text" name="phone" id="formularz_phone"/></br></br>
<label for="enquiry">Zapytanie</label><textarea name="enquiry" cols="20" rows="10" id="formularz_text"></textarea></br></br>
<input type="submit" id="contact_button" value="Wyślij" />
</form>
Jquery: jQuery的:
$('#contact_button').click(function () {
var name = $('#formularz_name').val();
var email = $('#formularz_email').val();
var phone = $('#formularz_phone').val();
var text = $('#formularz_text').val();
$.ajax({
url: 'inc/contact.php',
data: {'name': name, 'email': email, 'phone': phone, 'text': text},
type: 'POST',
success: function(odp){
alert(odp);
}
});
});
PHP: PHP:
<?php
if (!$name || !$email || !$phone || !$text) {
$problem = TRUE;
echo("<br><p>Musisz wypełnić wszystkie pola.</p>");
}
if (!$problem){
$data = date("d.m.y");
$message = "
<p>Name: $name</p>
<p>Phone: $phone</p>
<p>Email: $email</p>
<br>
<p>Enquiry: $text</p>";
$od = "$email";
$content = $message;
$header = "From: $od \r\n";
$header .= 'MIME-Version: 1.0' . "\r\n";
$header .= 'Content-type: text/html; charset=UTF-8' . "\r\n";
(mail('lethysek@gmail.com', 'New message from website Angelzena', $content, $header));
echo("<br><p>Wiadomość została wysłana.</p>");
}else{
echo("<p>Spróbuj ponownie</p>");
}
?>
Why it doesn't work? 为什么它不起作用? When i click submit, page is refreshed and nothing happens.
当我点击提交时,页面会刷新,没有任何反应。
Using button
instead of submit
to prevent refreshing. 使用
button
代替submit
以防止刷新。
Change <input type="submit" id="contact_button" value="Wyślij" />
To <input type="button" id="contact_button" value="Wyślij" />
更改
<input type="submit" id="contact_button" value="Wyślij" />
至<input type="button" id="contact_button" value="Wyślij" />
Try to serialize your form data to avoid unnecessary geting input values and prevent the default action of form (submit). 尝试序列化表单数据以避免不必要的geting输入值并阻止表单(提交)的默认操作。
$("form").on("submit", function(event) {
event.preventDefault();
var formData = $(this).serialize();
$.ajax({
url: 'inc/contact.php',
data: formData,
type: 'POST',
success: function(odp){
alert(odp);
}
});
});
尝试删除标签周围的包装器(你已经有一个jquery ajax()调用POST)并添加$ _POST ['name']作为其他提到的实际初始化你的php变量。
You need to stop the form from submitting in your jquery. 您需要阻止表单在您的jquery中提交。 Try this:
尝试这个:
$('#formularz').submit(function ( e ) {
var name = $('#formularz_name').val();
var email = $('#formularz_email').val();
var phone = $('#formularz_phone').val();
var text = $('#formularz_text').val();
$.ajax({
url: 'inc/contact.php',
data: {'name': name, 'email': email, 'phone': phone, 'text': text},
type: 'POST',
success: function(odp){
alert(odp);
}
});
e.preventDefault();
});
删除表单标签...它强制您的页面刷新。它将适合您。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.