我試圖做到這一點，以便當用戶輸入我的聯系表單而不是被重定向到“mail.php”文件時，他們只會顯示一條消息，表明該消息已在同一頁面上成功發送。我已經嘗試了很多 JS 教程，但我仍然不知道如何做到這一點。PHP Mailer 和 Html 可以工作，只是用于向用戶顯示成功或失敗消息的 javascript 不起作用。我最初嘗試將 JS 放在不同的文件中，然后在 jQuery 下面的頁面底部將其作為不同的腳本調用，但這不起作用，我可能會將其移回到自己的文件中。我的 HTML 目前看起來像<div class="form-container"> <form id="contact-form" method="post" action="mail.php" name="contact-form" role="form" > <div class="row"> <div class="col-md-6" style="padding-right: 4px;"> <input type="text" name="first_name" id="name" placeholder="Name" required /> </div> <div class="col-md-6" style="padding-left: 4px;"> <input type="email" name="email" id="email" placeholder="Email" oninvalid="this.setCustomValidity('Please enter valid email address.')" onchange="this.setCustomValidity('')" required /> </div> </div> <input type="text" name="subject" id="subject" placeholder="Why are you contacting me?" required /> <textarea name="message" id="message" cols="30" rows="10" placeholder="Tell me more about your propersition?" required></textarea> <input type="submit" id="submit" name="submit" value="submit"> <label class="checkbox-label"> <input type="checkbox" id="tos" name="tos" oninvalid="this.setCustomValidity('Please read the Terms of Service.')" onchange="this.setCustomValidity('')" required> <span class="checkbox-custom rectangular"></span> </label> <label for="tos">I agree to the <a href="tos.php">Terms of Service</a></label> </form></div>它主要是從網上復制的，但我實際上并不需要驗證器，因為它已經在 jQuery 中處理，所以不需要再次完成，我只需要在 contact.php 頁面上顯示錯誤/成功消息，而不是顯示它重定向到空白頁。
3 回答
月關寶盒
TA貢獻1772條經驗 獲得超5個贊
這是完整的工作代碼。ajax您的和中的問題很少HTML
您需要
dataType: json在$.ajax請求中進行設置，因為從 PHP 文件返回的響應是 json 格式。您的 HTML 不包含任何
.messages將顯示成功或錯誤消息的 div此外，您需要使用此 =>
$('#contact-form').submit(function(e){})進行form提交并使用e.preventDefault()它來確保頁面在form提交時不會重新加載
我認為您的PHPMailer工作正常并且已經在發送電子郵件。您只需要使用以下 HTML 和jQuery代碼，以便成功消息顯示在contant.php頁面上而不是另一個頁面上。
我已經測試了我的代碼，localHost并且運行良好，并且還發送了email正確的表單信息。data
jQuery
$(function() {
$('#contact-form').submit(function(e) {
e.preventDefault()
var url = "mail.php";
//POST values in the background the the script URL
$.ajax({
type: "POST",
url: url,
dataType: 'json',
data: $(this).serialize(),
success: function(data) {
// data = JSON object that contact.php returns
// apply success/danger
var messageAlert = 'alert-' + data.type;
var messageText = data.message
// Bootstrap alert box HTML
var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable" role="alert"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>' + messageText + '</div>'
// If we have messageAlert and messageText
if (messageAlert && messageText) {
// inject the alert to .messages div in our form
$('.form-container').find('.messages').html(alertBox);
// empty the form
$('#contact-form')[0].reset();
}
},
error: function(jqXHR, textStatus, errorThrown) {
console.error('The ajax request failed:' + errorThrown);
}
});
return false;
})
});
超文本標記語言
<div class="form-container">
<form id="contact-form" method="post" action="mail.php" name="contact-form" role="form">
<div class="row">
<div class="col-md-6" style="padding-right: 4px;">
<input type="text" name="first_name" id="name" placeholder="Name" required />
</div>
<div class="col-md-6" style="padding-left: 4px;">
<input type="email" name="email" id="email" placeholder="Email" oninvalid="this.setCustomValidity('Please enter valid email address.')" onchange="this.setCustomValidity('')" required />
</div>
</div>
<input type="text" name="subject" id="subject" placeholder="Why are you contacting me?" required />
<textarea name="message" id="message" cols="30" rows="10" placeholder="Tell me more about your propersition?" required></textarea>
<input type="submit" id="submit" name="submit" value="submit">
<label class="checkbox-label">
<input type="checkbox" id="tos" name="tos" oninvalid="this.setCustomValidity('Please read the Terms of Service.')" onchange="this.setCustomValidity('')" required>
<span class="checkbox-custom rectangular"></span>
</label>
<label for="tos">I agree to the <a href="tos.php">Terms of Service</a></label>
</form>
<div class="messages"></div>
</div>
catspeake
TA貢獻1111條經驗 獲得超0個贊
您需要更改一些事情。
如果您不想重定向到 mail.php，請將其從表單的
action屬性中刪除。由于您是通過 JavaScript 注入成功/失敗消息，因此添加onsubmit="return false;"以防止頁面刷新。<form id="contact-form" method="post" action="" name="contact-form" role="form" onsubmit="return false;">
messages我看不到HTML 中帶有類名的 div 。
哆啦的時光機
TA貢獻1779條經驗 獲得超6個贊
添加
e.preventDefault()內部
$('#contact-form').on('submit', function (e) {
e.preventDefault(); // here添加新的
<div>內部<form>標簽：
<form id="contact-form" method="post" action="mail.php" name="contact-form" role="form" > <div class="messages"></div>
- 3 回答
- 0 關注
- 205 瀏覽
添加回答
舉報
0/150
提交
取消