Bootstrap表单中的提交按钮无法工作

36

我在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">&times;</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>

如果有人能提供帮助,那将不胜感激!


https://dev59.com/ImAg5IYBdhLWcg3wSpTD#35224433 - Abdo-Host
4个回答

60

你的问题是这样的

<button type="button" value=" Send" class="btn btn-success" type="submit" id="submit" />

您设置了两次类型。您的浏览器仅接受第一个类型为“button”的设置。

<button type="submit" value=" Send" class="btn btn-success" id="submit" />

2
你们两个都是正确的,我不知道该给谁采纳答案!而且两个方法同时使用,这真的很难……不过它确实起作用了!非常感谢!但是我没有收到邮件? - user3027207
谁先回答了,其他问题应该作为一个不同的问题发布。 - Popnoodles
我会把它作为另一个问题提交,再次感谢! :) - user3027207
@popnoodles 我在写答案的时候看到了你的评论,读完后停下来了。然后在你发布后再次发表了我的回答。 - Mushahid Hussain

24
 <button type="button" value=" Send" class="btn btn-success" type="submit" id="submit">

随着

<button  value=" Send" class="btn btn-success" type="submit" id="submit">

你们两个都是正确的,我不知道该给谁采纳答案!而且两个方法同时使用,这真的很难……不过它确实起作用了!非常感谢!但是我没有收到邮件? - user3027207

7
  • 如果你使用 type=submit,它将变成一个提交按钮
  • 如果你使用 type=button,它只是一个普通的按钮,不会提交表单输入内容。

同时,你不应该同时使用这两个属性。


0

.btn 类是为了 <button>、<a> 或 <input> 元素而设计的(尽管某些浏览器可能会应用稍微不同的渲染)。

如果您正在使用 .btn 类在用于触发功能(例如折叠内容)的元素上,这些链接应该被赋予 role="button" 以充分传达它们的含义,以帮助屏幕阅读器等辅助技术。

希望这可以帮到您。


提交后请检查您的帖子。您不能在帖子中放置裸标签 - 请使用HTML实体 <。 - Auspex

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接