[英]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.