提交按钮在 Bootstrap 表单中不起作用
Posted
技术标签:
【中文标题】提交按钮在 Bootstrap 表单中不起作用【英文标题】:Submit button not working in Bootstrap form 【发布时间】:2013-12-17 08:26:42 【问题描述】:我在 Bootstrap 3 中有一个位于模态框内的表单。有一个名为“提交”的按钮,单击该按钮时,在表单中输入的内容应发送到电子邮件地址。虽然当我点击“提交”时没有任何反应。
有人知道为什么会这样吗?表格如下:
<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>
还有发送表单的process.php,在这里:
<?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);
?>
然后在索引中还有应该提交表单的 javascript。
<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>
如果有人可以提供帮助,将不胜感激!
【问题讨论】:
***.com/questions/23775272/… 【参考方案1】:你的问题是这样的
<button type="button" value=" Send" class="btn btn-success" type="submit" id="submit" />
您已经设置了两次类型。您的浏览器只接受第一个,即“按钮”。
<button type="submit" value=" Send" class="btn btn-success" id="submit" />
【讨论】:
你们俩都是正确的,我不知道该给谁接受的答案!两者同时进行,这真的很难……但它奏效了!非常感谢!但我没有收到电子邮件? 谁先回答!另一个问题应作为不同的问题发布。 我把它作为另一个问题,再次感谢! :) @popnoodles 当我差点写下答案时,我看到了你的评论。并在阅读您的评论后停止。发完之后再发一次。【参考方案2】:替换这个
<button type="button" value=" Send" class="btn btn-success" type="submit" id="submit">
与
<button value=" Send" class="btn btn-success" type="submit" id="submit">
【讨论】:
你们俩都是正确的,我不知道该给谁接受的答案!两者同时进行,这真的很难……但它奏效了!非常感谢!但我没有收到电子邮件?【参考方案3】: 如果你输入type=submit
它是一个提交按钮
如果您输入type=button
,它只是一个按钮,它不会提交您的表单输入。
你也不想同时使用这两个
【讨论】:
【参考方案4】:.btn 类是为
如果您在用于触发功能的元素上使用 .btn 类,例如。折叠内容,这些链接应该被赋予一个角色=“按钮”,以便将它们的含义充分传达给屏幕阅读器等辅助技术。 我希望这会有所帮助。
【讨论】:
请在提交后查看您的帖子。您不能在帖子中放置裸标签——使用 HTML 实体 <以上是关于提交按钮在 Bootstrap 表单中不起作用的主要内容,如果未能解决你的问题,请参考以下文章
HTML 提交按钮在 macOS 10.13 上的 chrome 中不起作用
Bootstrap popover 关闭功能在 iphone 中不起作用