我試圖做到這一點(diǎn)，以便當(dāng)用戶輸入我的聯(lián)系表單而不是被重定向到“mail.php”文件時(shí)，他們只會(huì)顯示一條消息，表明該消息已在同一頁(yè)面上成功發(fā)送。我已經(jīng)嘗試了很多 JS 教程，但我仍然不知道如何做到這一點(diǎn)。PHP Mailer 和 Html 可以工作，只是用于向用戶顯示成功或失敗消息的 javascript 不起作用。我最初嘗試將 JS 放在不同的文件中，然后在 jQuery 下面的頁(yè)面底部將其作為不同的腳本調(diào)用，但這不起作用，我可能會(huì)將其移回到自己的文件中。我的 HTML 目前看起來(lái)像<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>它主要是從網(wǎng)上復(fù)制的，但我實(shí)際上并不需要驗(yàn)證器，因?yàn)樗呀?jīng)在 jQuery 中處理，所以不需要再次完成，我只需要在 contact.php 頁(yè)面上顯示錯(cuò)誤/成功消息，而不是顯示它重定向到空白頁(yè)。
3 回答
月關(guān)寶盒
TA貢獻(xiàn)1772條經(jīng)驗(yàn) 獲得超5個(gè)贊
這是完整的工作代碼。ajax您的和中的問(wèn)題很少HTML
您需要
dataType: json在$.ajax請(qǐng)求中進(jìn)行設(shè)置，因?yàn)閺?PHP 文件返回的響應(yīng)是 json 格式。您的 HTML 不包含任何
.messages將顯示成功或錯(cuò)誤消息的 div此外，您需要使用此 =>
$('#contact-form').submit(function(e){})進(jìn)行form提交并使用e.preventDefault()它來(lái)確保頁(yè)面在form提交時(shí)不會(huì)重新加載
我認(rèn)為您的PHPMailer工作正常并且已經(jīng)在發(fā)送電子郵件。您只需要使用以下 HTML 和jQuery代碼，以便成功消息顯示在contant.php頁(yè)面上而不是另一個(gè)頁(yè)面上。
我已經(jīng)測(cè)試了我的代碼，localHost并且運(yùn)行良好，并且還發(fā)送了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;
})
});
超文本標(biāo)記語(yǔ)言
<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貢獻(xiàn)1111條經(jīng)驗(yàn) 獲得超0個(gè)贊
您需要更改一些事情。
如果您不想重定向到 mail.php，請(qǐng)將其從表單的
action屬性中刪除。由于您是通過(guò) JavaScript 注入成功/失敗消息，因此添加onsubmit="return false;"以防止頁(yè)面刷新。<form id="contact-form" method="post" action="" name="contact-form" role="form" onsubmit="return false;">
messages我看不到HTML 中帶有類名的 div 。
哆啦的時(shí)光機(jī)
TA貢獻(xiàn)1779條經(jīng)驗(yàn) 獲得超6個(gè)贊
添加
e.preventDefault()內(nèi)部
$('#contact-form').on('submit', function (e) {
e.preventDefault(); // here添加新的
<div>內(nèi)部<form>標(biāo)簽：
<form id="contact-form" method="post" action="mail.php" name="contact-form" role="form" > <div class="messages"></div>
- 3 回答
- 0 關(guān)注
- 232 瀏覽
添加回答
舉報(bào)
0/150
提交
取消