我的“您的留言已提交!”有问题!用户单击我的表单上的提交按钮后输入文本。问题是即使没有单击任何内容,此文本也仍会显示在开头,所以当您进入我的页面时,该文本已经存在... WHat在这里错了吗?
形成:
<form role="form" id="contactForm">
<div class="row">
<div class="form-group">
<input type="text" class="form-control" name="name" id="name" placeholder="Wpisz swoje imię, nazwisko" required="required">
</div>
<div class="form-group">
<input type="email" class="form-control" name="email" id="email" placeholder="Enter email" required>
</div>
<div class="form-group">
<textarea id="message" name="message" class="form-control" rows="5" placeholder="Enter your message" required></textarea>
</div>
<button type="submit" id="form-submit" class="btn-block">Wyślij wiadomość</button>
<div id="msgSubmit" class="h3 text-center hidden">Your message has been submitted!</div>
</div>
</form>
JS:
<script>
$(document).ready(function() {
$("#contactForm").on("submit", function(event) {
if (event.isDefaultPrevented()) {
} else {
event.preventDefault();
submitForm();
}
});
$("#msgSubmit").removeClass("hidden");
});
function submitForm() {
$.ajax({
type: "POST",
url: "mail.php",
data: $("#contactForm").serialize(),
success: function(text) {
if (text == "success"){
formSuccess();
}
},
error : function() {
}
});
}
$(document).ready(function formSuccess() {
$("#msgSubmit" ).removeClass( "hidden" );
});
</script>
PHP:
<?php
$name = $_POST["name"];
$email = $_POST["email"];
$message = $_POST["message"];
$EmailTo = "unknown@unknwon.com.pl";
$Subject = $name;
$message .= "\n\n" . 'From: '. $email;
$success = mail($EmailTo, $Subject, $message);
// redirect to success page
if ($success){
echo "success";
}else{
echo "invalid";
}
?>
最佳答案
我有:
在提交事件中移动了remove类。
最后删除了“就绪”处理程序,因为我认为这是没有必要的。
在ajax调用结束时添加了一个添加类
脚本(首选):
<script>
$(document).ready(function() {
$("#contactForm").on("submit", function(event) {
if (event.isDefaultPrevented()) {
} else {
event.preventDefault();
$("#msgSubmit").removeClass("hidden");
submitForm();
}
});
});
function submitForm() {
$.ajax({
type: "POST",
url: "mail.php",
data: $("#contactForm").serialize(),
success: function(text) {
$("#msgSubmit" ).addClass( "hidden" );
},
error : function() {
$("#msgSubmit" ).addClass( "hidden" );
}
});
}
</script>
第二种选择(如果成功则仅在最后发送消息):
<script>
$(document).ready(function() {
$("#contactForm").on("submit", function(event) {
if (event.isDefaultPrevented()) {
} else {
event.preventDefault();
submitForm();
}
});
});
function submitForm() {
$.ajax({
type: "POST",
url: "mail.php",
data: $("#contactForm").serialize(),
success: function(text) {
if (text == "success") {
$("#msgSubmit" ).removeClass( "hidden" );
setTimeout(function() {
$("#msgSubmit" ).addClass( "hidden");
}, 3000);
}
},
error : function() {
/* You probably want to add an error message as well */
$("#msgError" ).removeClass( "hidden" );
}
});
}
</script>
关于javascript - 提交开头出现的表单确认文本,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/35535957/