2
У меня есть форма, содержащаяся в щелевом крупном модальном диалоговом окне Twitter.twitter Bootstrap 3.x form в modal do
Когда я нажимаю кнопку SUBMIT, форма НЕ отправляется, а модальная функция НЕ увольняется. Функция 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> 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>
<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>
<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>
<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>
<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>
<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>
<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> <a class="kill" data-id="CMP"
href="#" title="Click here to delete this degree"><span class="glyphicons glyphicons-delete"></span></a> \t
</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>
<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>
<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> <a class="kill" data-id="DMin" href="#"
title="Click here to delete this degree"><span class="glyphicons glyphicons-delete"></span></a> \t
</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> <a class="kill" data-id="DMis" href="#"
title="Click here to delete this degree"><span class="glyphicons glyphicons-delete"></span></a> \t
</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>
<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> <a class="kill" data-id="EdD" href="#"
title="Click here to delete this degree"><span class="glyphicons glyphicons-delete"></span></a> \t
</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>
<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>
<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">
\t \t \t \t \t \t \t <span id="id_status" class="bold"></span>
</span>
</div>
<span id="id_error" class="help-block"> </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"> </span>
</div>
</div>
<div class="col-md-2"> </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">
\t \t \t \t \t \t \t <span id="name_status" class="bold"></span>
</span>
</div>
<span id="name_error" class="help-block"> </span>
</div>
</div>
<div class="col-md-2"> </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> Cancel & Close</button>
<button name="SUBMIT" id="SUBMIT" type="button" class="btn btn-primary" tabindex="40" form="DEGREE_FORM"><span class="glyphicons glyphicons-upload"></span> 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> Back to Top of Page</button>
</div>
<footer class="row">
© Copyright 2015 by Life Christian University, Inc. • All rights reserved. • 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
согласен с @dfsq опубликовать свой html. Это на 100% уверен, что ошибка Bootstrap –
Сообщение обновлено с полным кодом страницы – unpocoloco