[英]form with ajax - message form php without refresh page
I want to send form using an ajax call without refreshing the page 我想使用ajax调用发送表单而不刷新页面
Html HTML
<form id="form">
<input type="radio" name="radio" value="radio1">
<input type="radio" name="radio" value="radio1">
<input type="checkbox" name="box" value="box1">
<input type="checkbox" name="box" value="box2">
<input type="text" name="text" value="box2">
<input type="submit" id="submit" name="submit" class="embtn btn-1" value="Send" onclick="submitform()">
</form>
This is JS code 这是JS代码
function submitform(e) {
e.preventDefault();
$.ajax({
url : 'assets/php/brief-wiz.php',
type: 'post',
data: $('form').serialize()
}).done(function(html) {
$( ".form-message" ).append( html );
});
};
PHP 的PHP
<?php
$errors = [];
if (empty($_POST["radio"])) {
$errors[] = "Complete radio ";
} else {
$radio = implode($_POST['radio']);
}
if (empty($_POST["box"])) {
$errors[] = "Complete box ";
} else {
$box = implode($_POST['box']);
}
$text = ($_POST['text']);
$body = "";
$body .= "<div><b>1:</b> " . $profil . "</div>";
$body .= "<div><b>2:</b> " . $box . $text . "</div>";
$to = 'mymail@com.pl';
$subject = 'Contact;
$message = $body;
$headers = "From: webmaster@example.com" . "\r\n";
$headers .= "Reply-To: " . "\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=UTF-8\r\n";
$success = mail($to, $subject, $message, $headers);
echo $success ? "Mail sended" : "Error";
?>
Now my page is reloading without messgaes. 现在,我的页面正在重新加载而没有消息。
Without this code: 没有此代码:
(e) {
e.preventDefault();
}
Messages shows for one second, but the page is reloading. 消息显示一秒钟,但是页面正在重新加载。 How can I load the messages using PHP without refreshing the page.
如何在不刷新页面的情况下使用PHP加载消息。
Use Javascript Event : 使用Javascript事件:
HTML 的HTML
<form id="form" action="assets/php/brief-wiz.php">
<input type="radio" name="radio" value="radio1">
<input type="radio" name="radio" value="radio1">
<input type="checkbox" name="box" value="box1">
<input type="checkbox" name="box" value="box2">
<input type="text" name="text" value="box2">
<input type="submit" id="submit" name="submit" class="embtn btn-1" value="Send">
</form>
JAVASCRIPT JAVASCRIPT
$('form').on('submit',function(event){
event.preventDefault();
var form = event.currentTarget;
$.ajax(
{
url : $(form).attr('action'),
type: 'post',
data: $(form).serialize()
}
).done(
function(html) {
$( ".form-message" ).append( html );
}
);
});
将您的提交输入类型更改为按钮。
It is because the type of your button is submit ! 这是因为按钮的类型是Submit! I am suggesting you to use this instead :
我建议您改用此方法:
<button id="submit" class="embtn btn-1" onclick="submitform()">Send</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.