twitter Bootstrap 3.x 以模态形式执行答案

【问题标题】：twitter Bootstrap 3.x form in modal dotwitter Bootstrap 3.x 以模态形式执行
【发布时间】：2015-08-24 19:34:50
【问题描述】：

我有一个包含在 Twitter Bootstrap 大型模式对话框中的表单。

当我单击提交按钮时，表单不会提交，并且模式不会关闭。 submitEventHandler() 函数是一个经过全面测试和调试的函数，可确保在允许提交事件发生之前输入/选择所有必填字段的值。

function initializeEventHandlers() {
    $('#ADD_BUTTON').on('click', function() {
      $('#id').val(null);
      $('#level').val(null);
      $('#name').val(null);
      $('#edit').val(false);

      $('#DEGREE_ENTRY').modal('show');
    });


    $('#DEGREE_FORM').submit(function() {
      $('#DEGREE_ENTRY').modal('hide');
      return submitEventHandler();
    });

  } // end function initializeEventHandlers()

<!DOCTYPE HTML>
<html class="no-js" lang="en">

<head>
  <title>Page Title</title>

  <link rel="stylesheet" href="http://www.lcudev.com/_css/bootstrap.min.css">
  <link rel="stylesheet" href="http://www.lcudev.com/_css/open_sans.css">
  <link rel="stylesheet" href="http://www.lcudev.com/_css/raleway.css">
  <link rel="stylesheet" href="http://www.lcudev.com/_css/scriptina.css">
  <link rel="stylesheet" href="http://www.lcudev.com/_css/glyphicons.css">
  <link rel="stylesheet" href="http://www.lcudev.com/_css/glyphicons_filetypes.css">
  <link rel="stylesheet" href="http://www.lcudev.com/_css/glyphicons_social.css">
  <link rel="stylesheet" href="http://www.lcudev.com/_css/master.css">
  <link rel="stylesheet" href="http://www.lcudev.com/_css/forms.css">

  <script language="javascript" src="http://www.lcudev.com/_javascript/modernizr.custom.92742.js"></script>
  <script language="javascript" src="http://www.lcudev.com/_javascript/jquery-2.1.4.min.js"></script>
  <script language="javascript" src="http://www.lcudev.com/_javascript/bootstrap.min.js"></script>
  <script language="javascript" src="http://www.lcudev.com/_javascript/master.js"></script>
  <script language="javascript" src="http://www.lcudev.com/_javascript/forms.js"></script>

  <script language="javascript">
    $('document').ready(function() {
      initializeEventHandlers();
    });
  </script>
  <noscript>
    <meta http-equiv="refresh" content="0;URL=/miscellaneous/no_javascript.php">
  </noscript>
</head>

<body>
  <div id="CONTAINER" class="container">
    <header class="row">
      <h1>Life Christian University</h1>
      <a href="#">
        <img src="http://www.lcudev.com/_images/logos/lcu_logo_logotype_lg_20th_anniv.jpg" class="img-responsive">
      </a>
    </header>
    <div class="row">
      <!-- main menu code goes here -->
    </div>
    <ol class="breadcrumb">
      <!-- breadcrumbs <li> items goew here -->
    </ol>

    <div id="SYSTEM_MSG" class="alert alert-info bold col-md-12">Alert Message</div>

    <section class="row">
      <hgroup>
        <h1>Degrees Maintenance</h1>
      </hgroup>
      <div class="row" style="margin-bottom: 2em;">
        <div class="col-md-4 col-md-offset-8">
          <a id="ADD_BUTTON" type="button" class="btn btn-primary btn-sm pull-right" href="#"><span class=\"glyphicons glyphicons-plus\"></span>&nbsp;&nbsp;Add a New Degree Code</a>
        </div>
      </div>

      <article class="row">
        <div class="col-md-6 col-md-offset-3">
          <div class="table-responsive">
            <table class="table table-bordered table-condensed table-striped" summary="A list of classes for this campus.">
              <colgroup>
                <col id="ID">
                  <col id="LEVEL">
                    <col id="NAME">
                      <col id="ACTIONS">
              </colgroup>
              <thead>
                <tr>
                  <th scope="col" class="text-right">ID</th>
                  <th scope="col" class="text-center">Level</th>
                  <th scope="col" class="text-left">Name</th>
                  <th scope="col" class="text-left">Actions</th>
                </tr>
              </thead>
              <tfoot>
                <tr>
                  <th class="text-center" colspan="4">There are 15 degreess defined</th>
                </tr>
              </tfoot>
              <tbody>
                <tr>
                  <td class="text-right">A</td>
                  <td class="text-center">1</td>
                  <td class="text-left">Associate in</td>
                  <td class="text-left"><a class="edit" data-id="A" data-level="1" data-name="Associate in" href="#" title="Click here to edit this degree"><span class="glyphicons glyphicons-pencil"></span></a>&nbsp;&nbsp;
                    <a class="kill" data-id="A" href="#" title="Click here to delete this degree"><span class="glyphicons glyphicons-delete"></span>
                    </a>
                  </td>
                </tr>
                <tr>
                  <td class="text-right">AA</td>
                  <td class="text-center">1</td>
                  <td class="text-left">Associate of Arts in</td>
                  <td class="text-left"><a class="edit" data-id="AA" data-level="1" data-name="Associate of Arts in" href="#" title="Click here to edit this degree"><span class="glyphicons glyphicons-pencil"></span></a>&nbsp;&nbsp;
                    <a class="kill" data-id="AA" href="#" title="Click here to delete this degree"><span class="glyphicons glyphicons-delete"></span>
                    </a>
                  </td>
                </tr>
                <tr>
                  <td class="text-right">AD</td>
                  <td class="text-center">1</td>
                  <td class="text-left">Advanced Diploma in</td>
                  <td class="text-left"><a class="edit" data-id="AD" data-level="1" data-name="Advanced Diploma in" href="#" title="Click here to edit this degree"><span class="glyphicons glyphicons-pencil"></span></a>&nbsp;&nbsp;
                    <a class="kill" data-id="AD" href="#" title="Click here to delete this degree"><span class="glyphicons glyphicons-delete"></span>
                    </a>
                  </td>
                </tr>
                <tr>
                  <td class="text-right">B</td>
                  <td class="text-center">1</td>
                  <td class="text-left">Bachelor of</td>
                  <td class="text-left"><a class="edit" data-id="B" data-level="1" data-name="Bachelor of" href="#" title="Click here to edit this degree"><span class="glyphicons glyphicons-pencil"></span></a>&nbsp;&nbsp;
                    <a class="kill" data-id="B" href="#" title="Click here to delete this degree"><span class="glyphicons glyphicons-delete"></span>
                    </a>
                  </td>
                </tr>
                <tr>
                  <td class="text-right">BA</td>
                  <td class="text-center">1</td>
                  <td class="text-left">Bachelor of Arts in</td>
                  <td class="text-left"><a class="edit" data-id="BA" data-level="1" data-name="Bachelor of Arts in" href="#" title="Click here to edit this degree"><span class="glyphicons glyphicons-pencil"></span></a>&nbsp;&nbsp;
                    <a class="kill" data-id="BA" href="#" title="Click here to delete this degree"><span class="glyphicons glyphicons-delete"></span>
                    </a>
                  </td>
                </tr>
                <tr>
                  <td class="text-right">BS</td>
                  <td class="text-center">1</td>
                  <td class="text-left">Bachelor of Science in</td>
                  <td class="text-left"><a class="edit" data-id="BS" data-level="1" data-name="Bachelor of Science in" href="#" title="Click here to edit this degree"><span class="glyphicons glyphicons-pencil"></span></a>&nbsp;&nbsp;
                    <a class="kill" data-id="BS" href="#" title="Click here to delete this degree"><span class="glyphicons glyphicons-delete"></span>
                    </a>
                  </td>
                </tr>
                <tr>
                  <td class="text-right">CMP</td>
                  <td class="text-center">1</td>
                  <td class="text-left">Bachelor of Church Planting & Missions</td>
                  <td class="text-left"><a class="edit" data-id="CMP" data-level="1" data-name="Bachelor of Church Planting & Missions" href="#" title="Click here to edit this degree"><span class="glyphicons glyphicons-pencil"></span></a>&nbsp;&nbsp;<a class="kill" data-id="CMP"
                    href="#" title="Click here to delete this degree"><span class="glyphicons glyphicons-delete"></span></a>	
                  </td>
                </tr>
                <tr>
                  <td class="text-right">D</td>
                  <td class="text-center">1</td>
                  <td class="text-left">Diploma in</td>
                  <td class="text-left"><a class="edit" data-id="D" data-level="1" data-name="Diploma in" href="#" title="Click here to edit this degree"><span class="glyphicons glyphicons-pencil"></span></a>&nbsp;&nbsp;
                    <a class="kill" data-id="D" href="#" title="Click here to delete this degree"><span class="glyphicons glyphicons-delete"></span>
                    </a>
                  </td>
                </tr>
                <tr>
                  <td class="text-right">DLaw</td>
                  <td class="text-center">7</td>
                  <td class="text-left">Doctor of Laws in</td>
                  <td class="text-left"><a class="edit" data-id="DLaw" data-level="7" data-name="Doctor of Laws in" href="#" title="Click here to edit this degree"><span class="glyphicons glyphicons-pencil"></span></a>&nbsp;&nbsp;
                    <a class="kill" data-id="DLaw" href="#" title="Click here to delete this degree"><span class="glyphicons glyphicons-delete"></span>
                    </a>
                  </td>
                </tr>
                <tr>
                  <td class="text-right">DMin</td>
                  <td class="text-center">6</td>
                  <td class="text-left">Doctor of Ministry in</td>
                  <td class="text-left"><a class="edit" data-id="DMin" data-level="6" data-name="Doctor of Ministry in" href="#" title="Click here to edit this degree"><span class="glyphicons glyphicons-pencil"></span></a>&nbsp;&nbsp;<a class="kill" data-id="DMin" href="#"
                    title="Click here to delete this degree"><span class="glyphicons glyphicons-delete"></span></a>	
                  </td>
                </tr>
                <tr>
                  <td class="text-right">DMis</td>
                  <td class="text-center">7</td>
                  <td class="text-left">Doctor of Missiology in</td>
                  <td class="text-left"><a class="edit" data-id="DMis" data-level="7" data-name="Doctor of Missiology in" href="#" title="Click here to edit this degree"><span class="glyphicons glyphicons-pencil"></span></a>&nbsp;&nbsp;<a class="kill" data-id="DMis" href="#"
                    title="Click here to delete this degree"><span class="glyphicons glyphicons-delete"></span></a>	
                  </td>
                </tr>
                <tr>
                  <td class="text-right">Doc</td>
                  <td class="text-center">7</td>
                  <td class="text-left">Doctor of</td>
                  <td class="text-left"><a class="edit" data-id="Doc" data-level="7" data-name="Doctor of" href="#" title="Click here to edit this degree"><span class="glyphicons glyphicons-pencil"></span></a>&nbsp;&nbsp;
                    <a class="kill" data-id="Doc" href="#" title="Click here to delete this degree"><span class="glyphicons glyphicons-delete"></span>
                    </a>
                  </td>
                </tr>
                <tr>
                  <td class="text-right">EdD</td>
                  <td class="text-center">7</td>
                  <td class="text-left">Doctor of Education in</td>
                  <td class="text-left"><a class="edit" data-id="EdD" data-level="7" data-name="Doctor of Education in" href="#" title="Click here to edit this degree"><span class="glyphicons glyphicons-pencil"></span></a>&nbsp;&nbsp;<a class="kill" data-id="EdD" href="#"
                    title="Click here to delete this degree"><span class="glyphicons glyphicons-delete"></span></a>	
                  </td>
                </tr>
                <tr>
                  <td class="text-right">M</td>
                  <td class="text-center">5</td>
                  <td class="text-left">Master of</td>
                  <td class="text-left"><a class="edit" data-id="M" data-level="5" data-name="Master of" href="#" title="Click here to edit this degree"><span class="glyphicons glyphicons-pencil"></span></a>&nbsp;&nbsp;
                    <a class="kill" data-id="M" href="#" title="Click here to delete this degree"><span class="glyphicons glyphicons-delete"></span>
                    </a>
                  </td>
                </tr>
                <tr>
                  <td class="text-right">MA</td>
                  <td class="text-center">5</td>
                  <td class="text-left">Master of Arts in</td>
                  <td class="text-left"><a class="edit" data-id="MA" data-level="5" data-name="Master of Arts in" href="#" title="Click here to edit this degree"><span class="glyphicons glyphicons-pencil"></span></a>&nbsp;&nbsp;
                    <a class="kill" data-id="MA" href="#" title="Click here to delete this degree"><span class="glyphicons glyphicons-delete"></span>
                    </a>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </article>
      <div class="modal fade" id="DEGREE_ENTRY" tabindex="-1" role="dialog" aria-labelledby="classEntryModalDialog" aria-hidden="TRUE">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title">New Degree Entry</h4>
            </div>
            <div class="modal-body">
              <form id="DEGREE_FORM" name="DEGREE_FORM" role="form" method="post" action="http://admin.lcudev.com/config/degrees/index.php">
                <input name="action" id="action" type="hidden" value="">
                <div class="row">
                  <div class="col-md-4 col-md-offset-1">
                    <div id="id_group" class="form-group">
                      <label for="id" class="control-label">Degree ID*</label>
                      <div class="input-group">
                        <input name="id" id="id" type="text" class="form-control" tabindex="10" required autofocus pattern="[a-zA-Z]+" title="Please enter a new degree ID code here" placeholder="degreeID" value="">
                        <span class="input-group-addon input-group-sm">
							<span id="id_status" class="bold"></span>
                        </span>
                      </div>
                      <span id="id_error" class="help-block">&nbsp;</span>
                    </div>
                  </div>
                  <div class="col-md-5">
                    <div id="level_group" class="form-group">
                      <label for="level" class="control-label">Degree Level*</label>
                      <select name="level" id="level" class="form-control" tabindex="20">
                        <option value="">- Select -</option>
                        <option value="1">Freshman</option>
                        <option value="2">Sophomore</option>
                        <option value="3">Junior</option>
                        <option value="4">Senior</option>
                        <option value="5">Masters</option>
                        <option value="6">DMin</option>
                        <option value="7">PhD</option>
                      </select>
                      <span id="level_error" class="help-block">&nbsp;</span>
                    </div>
                  </div>
                  <div class="col-md-2">&nbsp;</div>
                </div>
                <div class="row">
                  <div class="col-md-9 col-md-offset-1">
                    <div id="name_group" class="form-group">
                      <label for="name" class="control-label">Degree Name*</label>
                      <div class="input-group">
                        <input name="name" id="name" type="text" class="form-control" tabindex="30" required pattern="[a-zA-Z ]+" title="Please enter the degree name here" placeholder="degree name" value="">
                        <span class="input-group-addon input-group-sm">
							<span id="name_status" class="bold"></span>
                        </span>
                      </div>
                      <span id="name_error" class="help-block">&nbsp;</span>
                    </div>
                  </div>
                  <div class="col-md-2">&nbsp;</div>
                </div>
              </form>
            </div>
            <div class="modal-footer">
              <button name="CANCEL" id="CANCEL" type="button" class="btn btn-link" tabindex="50" data-dismiss="modal"><span class="glyphicons glyphicons-ban"></span>&nbsp;&nbsp;Cancel &amp; Close</button>
              <button name="SUBMIT" id="SUBMIT" type="button" class="btn btn-primary" tabindex="40" form="DEGREE_FORM"><span class="glyphicons glyphicons-upload"></span>&nbsp;&nbsp;Save This Degree</button>
            </div>
          </div>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
      </div>
      <!-- /.modal -->

      <!-- InstanceEndEditable -->


    </section>

    <div class="row">
      <button id="TOP" type="button" class="btn btn-xs btn-link" tabindex="32767"><span class="glyphicons glyphicons-up-arrow"></span>&nbsp;&nbsp;Back to Top of Page</button>
    </div>

    <footer class="row">
      &copy; Copyright 2015 by Life Christian University, Inc. &bull; All rights reserved. &bull; Unauthorized duplication of site content is strictly forbidden
      <p id="siteseal" style="margin-top: 6px"><span id="siteseal"><script type="text/javascript" src="https://seal.godaddy.com/getSeal?sealID=zfFa5wE7mSdFUIwGJyK7j2gy8j79He28Y1eOLBZL34xkPov1I8nxgEtNv"></script></span>
      </p>
    </footer>
  </div>
  <!-- end #CONTAINER -->

  <script language="javascript">
    <!-- TemplateBeginEditable name="BottomScript" -->
    $('#TOP').on('click', function() {
      scrollToTop();
    });
     <!-- TemplateEndEditable -->
  </script>
</body>
<!-- InstanceEnd -->

</html>

这是 Bootstrap 错误还是我遗漏了什么/使用了错误的方法？

【问题讨论】：

你是否进入了提交处理程序？发布 HTML 代码。
同意@dfsq 发布您的 html。这 100% 肯定不是 Bootstrap 错误
帖子已更新为全页代码

标签： javascript jquery html forms twitter-bootstrap

【解决方案1】：

您应该将提交按钮放在

块内。您使用提交按钮的方式，浏览器无法知道这些元素之间的关系，引导程序也无法知道这些元素之间的关系。把它移进去。

<form>
....
<input type='submit'>
</form>

会起作用的。

【讨论】：

在布局方面，有时这并不容易做到，特别是如果您使用的是强制一些限制的visual studio。但如果你不这样做，很容易扩展你的表单，使其包含模态内容。
我认为下面的标签参数允许在 HTML5 的
边界之外放置一个提交按钮：form="DEGREE_FORM"
尝试了 Arash 的建议。不开心！