[英]Modal Contact form required fields don't work
我的頁面上有一個模式,其中包含聯系表格。 無論如何,像mail這樣的字段應該是必需的,但是即使沒有填寫這些字段也要立即將其發送。這怎么可能?
模態:
<div class="modal fade" id="form-content" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" style="border-bottom: none;">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Contact</h4>
</div>
<div class="modal-body">
<form class="contact" name="contact">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input type="text" name="name" class="form-control" placeholder="Name" required="required">
</div>
<br/>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
<input type="email" name="email" class="form-control" placeholder="Mail">
</div>
<br/>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-globe"></i></span>
<input type="url" name="website" class="form-control" placeholder="Website">
</div>
<br/>
<textarea rows="6" name="message" class="form-control" placeholder="Message"></textarea>
</form>
</div>
<div class="modal-footer" style="border-top: none;">
<input class="btn btn-success" type="submit" value="Send!" id="submit">
</div>
</div>
</div>
</div>
PHP腳本:
<?php
$myemail = 'mail@mail.nl';
if (isset($_POST['name'])) {
$name = strip_tags($_POST['name']);
$email = strip_tags($_POST['email']);
$message = strip_tags($_POST['message']);
$website = strip_tags($_POST['website']);
echo "<br><span style=\"display:table; margin:0 auto;\" class=\"alert alert-success\" id=\"alert-message\" data-alert=\"alert\">Your message has been received. Thank you!</span>";
$to = $myemail;
$email_subject = "Contact formulier van: $name";
$email_body = "Je hebt een nieuw bericht ontvangen via het contactformulier. ".
"Hier zijn de de details:\n Naam: $name \n ".
"Email: $email\n Website: $website \n Bericht: \n $message";
$headers = "From: $email\n";
$headers .= "Reply-To: $email";
mail($to,$email_subject,$email_body,$headers);
}?>
編輯:我也有一個main.js,向人們展示表單已發送:
$(document).ready(function () {
$("input#submit").click(function(){
$.ajax({
type: "POST",
url: "process.php", //
data: $('form.contact').serialize(),
success: function(msg){
$("#thanks").html(msg)
$("#form-content").modal('hide');
$('#thanks').delay(3000).fadeOut()
},
error: function(){
alert("failure");
}
});
});
});
您錯過了表單中的操作和方法: action="yourpage.php" method="POST"
其中action
是指您的php頁面和method
,是指您發送數據的方式,在本例中,POST是指您的PHP代碼中的$_POST['name']
(等)。
提交也應該在 Form標記內,而不是外部。
像這樣:
<div class="modal fade" id="form-content" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" style="border-bottom: none;">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Contact</h4>
</div>
<div class="modal-body">
<form class="contact" name="contact">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input type="text" name="name" class="form-control" placeholder="Name" required="required">
</div>
<br/>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
<input type="email" name="email" class="form-control" placeholder="Mail">
</div>
<br/>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-globe"></i></span>
<input type="url" name="website" class="form-control" placeholder="Website">
</div>
<br/>
<textarea rows="6" name="message" class="form-control" placeholder="Message"></textarea>
<div class="modal-footer" style="border-top: none;">
<input class="btn btn-success" type="submit" value="Send!" id="submit">
</div>
</form>
</div>
</div>
</div>
您必須在表單打開標記中提及表單方法和動作 。 之后,請檢查輸出。 例如,表單結構應該像
<form name="input" action="demo_form_action.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.