[英]Contact form (successful submission & reset )
我有這個聯系表格
1- contactform.js(用於驗證
2- contactform.php(用於發布和傳遞表單信息)
3-包含表單前端的HTML
聯系表格可以很好地填寫和傳遞信息
問題在於,提交成功消息后,不會出現成功消息,並且頁面也不會使用當前信息刷新
請指教...
jQuery(document).ready(function($) { "use strict"; //Contact $('form.contactForm').submit(function() { var f = $(this).find('.form-group'), ferror = false, emailExp = /^[^\\s()<>@,;:\\/]+@\\w[\\w\\.-]+\\.[az]{2,}$/i; f.children('input').each(function() { // run all inputs var i = $(this); // current input var rule = i.attr('data-rule'); if (rule !== undefined) { var ierror = false; // error flag for current input var pos = rule.indexOf(':', 0); if (pos >= 0) { var exp = rule.substr(pos + 1, rule.length); rule = rule.substr(0, pos); } else { rule = rule.substr(pos + 1, rule.length); } switch (rule) { case 'required': if (i.val() === '') { ferror = ierror = true; } break; case 'minlen': if (i.val().length < parseInt(exp)) { ferror = ierror = true; } break; case 'email': if (!emailExp.test(i.val())) { ferror = ierror = true; } break; case 'checked': if (!i.attr('checked')) { ferror = ierror = true; } break; case 'regexp': exp = new RegExp(exp); if (!exp.test(i.val())) { ferror = ierror = true; } break; } i.next('.validation').html((ierror ? (i.attr('data-msg') !== undefined ? i.attr('data-msg') : 'wrong Input') : '')).show('blind'); } }); f.children('textarea').each(function() { // run all inputs var i = $(this); // current input var rule = i.attr('data-rule'); if (rule !== undefined) { var ierror = false; // error flag for current input var pos = rule.indexOf(':', 0); if (pos >= 0) { var exp = rule.substr(pos + 1, rule.length); rule = rule.substr(0, pos); } else { rule = rule.substr(pos + 1, rule.length); } switch (rule) { case 'required': if (i.val() === '') { ferror = ierror = true; } break; case 'minlen': if (i.val().length < parseInt(exp)) { ferror = ierror = true; } break; } i.next('.validation').html((ierror ? (i.attr('data-msg') != undefined ? i.attr('data-msg') : 'wrong Input') : '')).show('blind'); } }); if (ferror) return false; else var str = $(this).serialize(); var action = $(this).attr('action'); if( ! action ) { action = 'contactform/contactform.php'; } $.ajax({ type: "POST", url: action, data: str, success: function(msg) { // alert(msg); if (msg == 'OK') { $("#sendmessage").addClass("show"); $("#errormessage").removeClass("show"); $('.contactForm').find("input, textarea").val(""); } else { $("#sendmessage").removeClass("show"); $("#errormessage").addClass("show"); $('#errormessage').html(msg); } } }); return false; }); });
<div class="form"> <div id="sendmessage">Your message has been sent. Thank you!</div> <div id="errormessage"></div> <form action="" method="post" role="form" class="contactForm"> <div class="form-row"> <div class="form-group col-md-6"> <input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" /> <div class="validation"></div> </div> <div class="form-group col-md-6"> <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" /> <div class="validation"></div> </div> </div> <div class="form-group"> <input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" /> <div class="validation"></div> </div> <div class="form-group"> <textarea class="form-control" name="message" rows="5" data-rule="required" data-msg="Please write something for us" placeholder="Message"></textarea> <div class="validation"></div> </div> <div class="text-center"><button type="submit">Send Message</button></div> <span> <a href="#" onclick="document.getElementById('captcha').src = 'cap/securimage_show.php?' + Math.random(); return false"><img alt="" height="20" src="cap/refresh.gif" width="22" align="middle" /></a> </span> <span> <input style="background:#FFFFFF" type="text" name="captcha_code" size="10" maxlength="6" /> </span> <span> <img id="captcha" src="cap/securimage_show.php" alt="CAPTCHA Image" height="40" width="114" /> </span> </form>
<?php session_start(); ?>
<?php
include_once 'cap/securimage.php';
$securimage = new Securimage();
if ($securimage->check($_POST['captcha_code']) == false) {
die('The code you entered was incorrect. Go back and try again.');
}
$name = $_POST['name'];
$email = $_POST['email'];
$subject = $_POST['subject'];
$message = $_POST['message'];
{
$message="Dear ".$name."
name:".$name."
email:".$email."
subject:".$subject."
message:".$message."
";
$message = stripslashes($message);
$to = '' . ', ';
$to .= $email .',';
$subject = '';
$from = "\n";
$from.= "Content-Type: text/html; charset=utf-8\n";
mail($to,$subject,$message,$from);
?><?php
}
?>
代碼中的錯誤div僅在出現錯誤的情況下出現
以此更改您的ajax行,可能對您有幫助:
$.ajax({
type: "POST",
url: action,
data: str,
success: function(msg) {
if (msg == 'OK') {
msg = 'success';
$("#sendmessage").addClass("show");
/* showing the message */
$("#errormessage").addClass("show");
$('#errormessage').html(msg);
$('.contactForm').find("input, textarea").val("");
} else {
msg = 'failed';
$("#sendmessage").removeClass("show");
$("#errormessage").addClass("show");
$('#errormessage').html(msg);
}
}
});
return false;
});
$("#myForm").validate({
submitHandler: function (form) {
console.log('test');
form.submit();
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.