提交按钮不能以Bootstrap形式工作 [英] Submit button not working in Bootstrap form
本文介绍了提交按钮不能以Bootstrap形式工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在Bootstrap 3中有一个表单，里面是一个模式。有一个名为提交的按钮，当它被点击时，表单中输入的内容应发送到一个电子邮件地址。虽然当我点击提交时，没有任何反应。
有人知道为什么会发生这种情况吗？以下是表格：
< div class =modal fadeid =contactPoptabindex = - 1role = dialogaria-labelledby =contactModalaria-hidden =true>
< div class =modal-dialog>
< div class =modal-content>
< div class =modal-header>
<！ - 关闭按钮。 - >
< button type =buttonclass =closedata-dismiss =modalaria-hidden =true>& times;< / button>
<！ - 标题。 - >
< h3 class =modal-titlestyle =font-family：'Lato'，sans-serif; font-weight：700;>
联系我们< small style =font-family：'Lato'，sans-serif; font-weight：400;>你对我们很重要。< / small>
< / h3>
< / div>
<！ - 用户输入字段。 - >
< form class =contactaction =process.phpmethod =post>
< div class =modal-body>
< div class =row>
< div class =col-sm-6>
< label class =control-label> Subject< / label>
< input type =textclass =form-controlrequired =requiredplaceholder =我本意是网站！ NAME = 受试者 >
< / div>
< div class =col-sm-6>
< label class =control-label>用户名< / label>
< input type =textclass =form-controlrequired =requiredplaceholder =Notchname =username>
< / div>
< / div>
< br>
< div class =row>
< div class =col-sm-6>
< label class =control-label> Message< / label>
< / div>
< div class =col-sm-6>
< label class =control-label>电子邮件< / label>
< input type =emailclass =form-controlrequired =requiredplaceholder =johnsmith@example.comname =email>
< / div>
< div class =col-sm-6style =line-height：21px;>
< br>
< p>回复通常在1-2个工作日内收到。< / p>
< p>请尽可能简洁明了，以便我们更快地处理您的查询。< / p>
< / div>
< / div>
< / div>
<！ - - Close&提交按钮。 - >
< div class =modal-footer>
< button type =buttonclass =btn btn-infodata-dismiss =modal>< i class =glyphicon glyphicon-remove>< / i>关闭< /按钮>
< button type =buttonvalue =Sendclass =btn btn-successtype =submitid =submit>< i class =glyphicon glyphicon-inbox> < I> /;提交< /按钮>
< / div>
< / div>
< / div>
< / div>
还有process.php发送表单，在这里：
<？php
//在这里添加收件人的地址
$ myemail ='contact@tinymine.info';
//从html获取命名输入，然后发布到#thanks
if（isset（$ _ POST ['name']））{
$ name = strip_tags（$ _ POST [ '名称']）;
$ email = strip_tags（$ _ POST ['email']）;
$ message = strip_tags（$ _ POST ['message']）;
echo< span class = \alert alert-success \>您的邮件已收到，我们会尽快回复您。以下是您提交的内容：<跨度><峰; br><峰; br>中;
echo< stong> Name：< / strong>。$ name。< br>;
echo< stong>电子邮件：< / strong>。$ email。< br>;
echo< stong> Message：< / strong>。$ message。< br>;
//生成电子邮件并发送！
$ to = $ myemail;
$ email_subject =联系表单提交：$ name;
$ email_body =您收到了一条新消息。
以下是详细信息：\ n名称：$ name \\\
。
电子邮件：$ email \\\
消息\ $ $消息;
$ headers =From：$ myemail\\\
;
$ headers。=回复：$ email;
邮件（$ to，$ email_subject，$ email_body，$ headers）;
}
？>
然后在索引中也有应该提交表单的javascript。
< script type =text / javascript>
$（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'）; //隐藏弹出窗口
}，
error：function（）{
alert（failure）;
}
}）;
}）;
} ）;
< / script>
如果有人能提供帮助，我们将非常感谢！
< button type =button value =发送class =btn btn-successtype =submitid =submit/>
您将类型设置了两次。您的浏览器只接受第一个，即按钮。
< button type =submitvalue =Send class =btn btn-successid =submit/>
I have a form in Bootstrap 3 that's inside a modal. There's a button called "submit" where when it's clicked the stuff that was entered in the form should be sent to an email address. Although when I click "Submit" nothing happens.
Does anyone know why this happens? Here's the form:
<div class="modal fade" id="contactPop" tabindex="-1" role="dialog" aria-labelledby="contactModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<!-- Close button. -->
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<!-- Title. -->
<h3 class="modal-title" style="font-family: 'Lato', sans-serif; font-weight: 700;">
Contact Us <small style="font-family: 'Lato', sans-serif; font-weight:400;"> You matter to us.</small>
</h3>
</div>
<!-- User input fields. -->
<form class="contact" action="process.php" method="post">
<div class="modal-body">
<div class="row">
<div class="col-sm-6">
<label class="control-label">Subject</label>
<input type="text" class="form-control" required="required" placeholder="I aciddentally the website!" name="subject">
</div>
<div class="col-sm-6">
<label class="control-label">Username</label>
<input type="text" class="form-control" required="required" placeholder="Notch" name="username">
</div>
</div>
<br>
<div class="row">
<div class="col-sm-6">
<label class="control-label">Message</label>
<textarea class="form-control" rows="8" style="resize: vertical;" required="required" placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget fermentum justo, sit amet semper." name="message"></textarea>
</div>
<div class="col-sm-6">
<label class="control-label">Email</label>
<input type="email" class="form-control" required="required" placeholder="johnsmith@example.com" name="email">
</div>
<div class="col-sm-6" style="line-height: 21px;">
<br>
<p>Responses are usually received within 1-2 business days.</p>
<p>Please be as clear and concise as possible, in order to help us process your inquiry faster.</p>
</div>
</div>
</div>
<!-- Close & submit buttons. -->
<div class="modal-footer">
<button type="button" class="btn btn-info" data-dismiss="modal"><i class="glyphicon glyphicon-remove"></i> Close</button>
<button type="button" value=" Send" class="btn btn-success" type="submit" id="submit"><i class="glyphicon glyphicon-inbox"></i> Submit</button>
</div>
</div>
</div>
</div>
There's also the process.php that sends the form, which is here:
<?php
//add the recipient's address here
$myemail = 'contact@tinymine.info';
//grab named inputs from html then post to #thanks
if (isset($_POST['name'])) {
$name = strip_tags($_POST['name']);
$email = strip_tags($_POST['email']);
$message = strip_tags($_POST['message']);
echo "<span class=\"alert alert-success\" >Your message has been received, and we will get back to you as soon as possible. Here is what you submitted:</span><br><br>";
echo "<stong>Name:</strong> ".$name."<br>";
echo "<stong>Email:</strong> ".$email."<br>";
echo "<stong>Message:</strong> ".$message."<br>";
//generate email and send!
$to = $myemail;
$email_subject = "Contact form submission: $name";
$email_body = "You have received a new message. ".
" Here are the details:\n Name: $name \n ".
"Email: $email\n Message \n $message";
$headers = "From: $myemail\n";
$headers .= "Reply-To: $email";
mail($to,$email_subject,$email_body,$headers);
}
?>
And then in the index there's also the javascript that is supposed to submit the form.
<script type="text/javascript">
$(document).ready(function () {
$("input#submit").click(function(){
$.ajax({
type: "POST",
url: "process.php", //process to mail
data: $('form.contact').serialize(),
success: function(msg){
$("#thanks").html(msg) //hide button and show thank you
$("#form-content").modal('hide'); //hide popup
},
error: function(){
alert("failure");
}
});
});
});
</script>
If someone could help that would be greatly appreciated!
解决方案
Your problem is this
<button type="button" value=" Send" class="btn btn-success" type="submit" id="submit" />
You've set the type twice. Your browser is only accepting the first, which is "button".
<button type="submit" value=" Send" class="btn btn-success" id="submit" />
这篇关于提交按钮不能以Bootstrap形式工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
