Вот моя форма, которая находится в моем модальном окне:
У меня нет кнопки закрытия, и я отключил закрытие окна при нажатии клавиши esc. Я хочу иметь возможность отправлять данные формы при нажатии кнопки «Отправить» или при нажатии клавиши ввода.
<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-header">
<h3 id="myModalLabel">Enter your Credentials</h3>
</div>
<div class="modal-body">
<form id="login-form" class="form-horizontal" accept-charset="UTF-8" data-remote="true"">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="email" id="email" name="email" value="" placeholder="Email">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input type="password" id="passwd" name="passwd" value="" placeholder="Password">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<input type="submit" id="login" value="Login"class="btn btn-primary" />
</div>
</div>
</form>
</div>
</div>
Вот скрипт, который я использую:
$(document).ready(function(){
$('#myModal').modal('show');
});
function submitLogin() {
$.ajax({
url:"login_mysql.php",
type:'POST',
dataType:"json",
data: $("#login-form").serialize()
}).done(function(data){
//do something
});
}
$('#passwd').keypress(function(e) {
if (e.which == '13') {
submitLogin();
}
});
$('#login').click(function(){
submitLogin();
});
При нажатии клавиши ввода после ввода моего пароля или нажатия кнопки отправки та же страница перезагружается, а скрипт ajax - нет. запустить. Может кто-нибудь сказать мне, если мой скрипт конфликтует с настройками по умолчанию моего модального окна?
Прослушайте событие формы submit
- оно вызывается событиями ввода и нажатия.
Разметка
<form id="yourForm">
<input type="text" name="username">
<input type="password" name="password">
<input type="submit" value="Submit">
</form>
JS
$('#yourForm').submit(function(event){
// prevent default browser behaviour
event.preventDefault();
//do stuff with your form here
...
});
Я сделал это, когда форма отправки откроется в модальном диалоговом окне и после этого отправит всю запись в полях. Если вы нажмете кнопку «Отправить», запись будет сделана в базе данных, и страница сразу же будет перенаправлена на ту же страницу с новыми данными. Нет необходимости обновлять, чтобы увидеть последние введенные данные. Надеюсь, это поможет.
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">ADD CONTENT</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Please Add Content</h4>
</div>
<div class="modal-body">
<form role="form" action="" method="POST">
<!-- YOUR HTML FORM GOES HERE--->
<button type="submit" name="submit" class="btn btn-primary btn-lg"id="sub" onclick="SUBMISSION()" >Submit </button>
</fieldset>
</form>
<?php
if(isset( Я сделал это, когда форма отправки откроется в модальном диалоговом окне и после этого отправит всю запись в полях. Если вы нажмете кнопку «Отправить», запись будет сделана в базе данных, и страница сразу же будет перенаправлена на ту же страницу с новыми данными. Нет необходимости обновлять, чтобы увидеть последние введенные данные. Надеюсь, это поможет.
[110]
POST['submit']))
{
SUBMISSION();
}
function SUBMISSION()
{
// UR CONNECTION ESTABLISHMENT CODE GOES HERE
// SQL QUERY FOR INSERTION IN FIELDS
echo"<script type=\"text/javascript\">
document.location.href='http://localhost/dict/pages/YOURPAGE.php';
</script>";
$conn->CLOSE();
}
?>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-12 -->
РЕДАКТИРОВАТЬ: 2. Попробуйте удалить data-keyboard = "false".