尝试阻止页面重新加载时,提交按钮和表单不工作 [英] Submit button and form not working when attempting to prevent page reload
问题描述
我知道关于如何在使用AJAX提交表单后阻止页面重新载入有许多问题和答案,但我无法让我的工作。我试着将按钮设置为 type:button
,它完全禁用了按钮。当我在窗体上尝试 onsubmit:return false
时,这不会导致单击按钮。使用jQuery来防止默认也没有解决。我想要的是用PHP发送这封电子邮件,从表单中检索数据,而不需要重新加载页面。任何帮助将不胜感激。
表格
I know there are numerous questions and answers on how to prevent page reload after form submit with AJAX but I just couldn't get mine to work. I've tried setting the button to type: button
which just disables the button completely. When I try onsubmit: return false
on the form, this results in nothing clicking the button. Using jQuery to prevent default also didn't work out. What I want is to send this email with PHP retrieving data from the form without the page from reloading. Any help would be highly appreciated.
<?php include('php/interuni_process.php');?>
<form class="form_pro" action="index.php" method="post" role="form">
<input type="text" class="form" name="E-mail" placeholder="E-mail" value="<?= $email ?>">
<div class="error"><?= $email_error ?></div>
<button name="submit" type="submit" class="action_button"></button>
</form>
PHP
PHP
$email_error = "";
$email = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (empty($_POST["E-mail"])) {
$email_error = "E-mail is required";
} else {
$email = test_input($_POST["E-mail"]);
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$email_error = "Invalid email format";
}
}
if ($email_error == '' ){
unset($_POST['submit']);
$to = " Whoever <$email>";
$subject = 'Hello';
$message = "Hello, $firstname!";
if (mail($to, $subject, $message, $headers)){
$email = '';
}
}
}
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
我也试过了
I've also tried
$( document ).ready(function() {
$(".form_pro").submit(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "php/interuni_process.php",
data: $(this).serialize(),
success: function(data) {
},
error: function() {
}
});
});
});
推荐答案
我认为你必须改变逻辑流程来做所以。
请尝试下面的代码,我已经在我的电脑上测试过。
i think you have to change the logic flow to do so. try the following code which i have tested on my PC.
<script src="jquery-1.11.1.js"></script>
<form id="myData" class="form_pro" method="post" role="form">
<input type="text" class="form" name="E-mail" placeholder="E-mail" value="">
<div class="error"></div>
<button name="submit" type="button" class="action_button" onclick="doSubmit();">OK</button>
</form>
<script>
function doSubmit(){
$.ajax({
url:'interuni_process.php',
data:$("#myData").serialize(),
type:'POST',
success: function (data, textStatus, jqXHR) {
if(data==="SUCCESS"){
$(".error").text("No error occurred");
}else{
$(".error").text("Error occurred: "+ data);
}
}
});
};
</script>
以及interuni_process.php的示例代码是
and sample code for "interuni_process.php" is
<?php
$eMail=$_POST["E-mail"];
if($eMail===""){ //or whatever process condition you want to do
echo "Email cannot be blank";
}else{
echo "SUCCESS";
}
?>
按照您的要求修改业务逻辑
modify business logic as your per requirement
这篇关于尝试阻止页面重新加载时,提交按钮和表单不工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!