引导表单未提交答案

【问题标题】：bootstrap form is not getting submitted引导表单未提交
【发布时间】：2016-04-03 09:27:06
【问题描述】：

我正在使用 Bootstrap 并尝试将表单提交到 PHP 页面。但是form 没有被提交。

<div class="container">   
  <div class="row">
    <div class="col-md-5 col-sm-12">
      <ul class="timeline" data-offset-top="3">
        <li>
          <div class="timeline-panel">
            <form name="Wall_Post" id="Wall_Post" action="/update.php"  method="post" role="form" enctype="multipart/form-data" class="facebook-share-box">
              <div class="timeline-body">
                <div class="share-form">
                  <ul class="post-types">
                    <li class="post-type">
                      <a class="status" id="shareType" href="#"><i class="fa fa-file"></i> Status</a>
                    </li>
                    <li class="post-type">
                      <a class="photos" id="shareType" href="#"><i class="fa fa-camera"></i> Photos</a>
                    </li>
                    <li class="post-type">
                      <a class="videos" id="shareType" href="#"><i class="fa fa-film"></i> Video</a>
                    </li>
                    <li class="post-type">
                      <a class="location" id="shareType" href="#"><i class="fa fa-map-marker"></i> Place</a>
                    </li>
                  </ul>
                  <div class="share">
                    <div class="arrow"></div>
                    <div><textarea name="message" cols="40" rows="10" id="status_message" class="form-control message" style="height: 62px; overflow: hidden;" placeholder="What's on your mind ?"></textarea> </div>

                    <div class="image hide">
                      <input type="file" class="form-control" name="image" id="image" />
                    </div>
                    <div class="video hide">
                      <input type="text" class="form-control" placeholder="Youtube or Vimeo video URL" id ="videoUrl" name="videoUrl"/>
                    </div>
                    <div class="place hide">
                      <input id="geocomplete" class="form-control" type="text" name="location" placeholder="Enter a location" />
                      <div class="map_canvas"></div>
                      <input type="hidden" name="lat" />
                      <input type="hidden" name="lng" />
                    </div>
                    <input type="hidden" name="shareType" class="shareType" value="status" />
                  </div>
                </div>
              </div>
              <div class="timeline-footer clearfix">
                <div class="pull-right">
                  <input type="submit" name="submit" value="Post" id="btn-share" class="btn btn-primary" />
                </div>
              </div>
            </form>
          </div>
        </li>
      </ul>
    </div>
  </div>     
</div>

我也在我的网站中使用 jquery v1.11.1，相同的代码在不包含 jquery v1.11.1 的其他页面中运行良好。另一件事我不想使用 ajax 提交表单。有没有可能？

【问题讨论】：

console 中的任何错误？（两页） - 我猜你有插件阻止submit。不加载 jQuery 时，插件不起作用。
点击按钮后它没有做任何动作。没有错误没有消息
我明白了，但您在console 中看到任何错误吗？你知道如何检查吗？
可能是因为你重复了 id "shareType" 记住应该是唯一的
bootstrap-modal.js:42 Uncaught TypeError: Cannot read property 'webkit' of undefined

标签： php jquery html forms twitter-bootstrap

【解决方案1】：

您的 html 工作正常（尽管有一些重复的 id ......）。当我单击提交按钮时，表单将提交到 /update.php。所以它必须是阻止表单提交的javascript。您是否包含任何 javascript 文件？如果是，他们是否会提交表单？

编辑：在您对 javascript 文件发表评论后，我发现了问题：在您的 script.js 中，您在第 12 行执行 $("form").submit()。在此函数结束时，您执行 return false;。这会覆盖每个表单的提交过程。删除第 47 行的 return false; 和第 45 行的 return false;（或删除 switch 语句中的整个默认部分）！

【讨论】：

是的，你是对的，相同的代码在其他页面中运行良好，没有 javasctip 加载。我不知道哪个 javascript 正在停止表单 sumiting
谢谢你的朋友。你给了我主意。以上都不起作用，但我修改了所有与表单相关的js。现在它工作正常。结论是我的 JavaScript 正在提交表单

【解决方案2】：

也许你输入错误 action="/update.php" 尝试更改 action="../update.php

【讨论】：

他说提交按钮没有做任何事情，所以这不是正确的答案。

【解决方案3】：

正如@Laurens 所说 - 您在该函数的末尾执行 return false ，但您也在根据正在提交的表单的 id 执行 switch 语句，默认操作是在以下情况下返回 false id 不是上述三个之一。这意味着此表单（不是列出的三个表单之一）将触发默认操作并返回 false - 因此不提交表单。您需要像其他表单一样为此表单添加一个开关盒

【讨论】：

【解决方案4】：

一个错误是您有多个相同 ID（“shareType”）的实例 - 我不知道这是否会导致问题 - 但您应该将它们更改为每个链接的唯一 ID。复制 id 的示例如下：

<a class="status" id="shareType" href="#"><i class="fa fa-file"></i> Status</a>

【讨论】：