У меня есть регистрационная форма в bootstrap модальном окне, я хочу отправить его и проверить, чтобы отображались ошибки без перезагрузки страницы (потому что модальное окно закрывается). Кто-нибудь может подсказать решение? Я пробовал много вариантов, но все равно не работал. Вот мой код, который работает, но не идеально, он отправляет, но все же перезагружает страницу.
<div class="modal fade" id="myModal1">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Registration</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<form id="regform" method="post" action="#">
<?php include('errors.php') ?>
<div class="input-group">
<label>Username</label>
<input id="name" type="text" name="username" value="<?php echo $username; ?>">
</div>
<div class="input-group">
<label>Email</label>
<input id="email" type="email" name="email" value="<?php echo $email; ?>">
</div>
<div class="input-group">
<label>Password</label>
<input id="pass1" type="password" name="password_1">
</div>
<div class="input-group">
<label>Confirm password</label>
<input id="pass2" type="password" name="password_2">
</div>
<div class="input-group">
<button type="submit" class="btn" name="reg_user">Register</button>
</div>
<p>
Already a member? <a href="login.php">Sign in</a>
</p>
</form>
<script>
$(document).ready(function() {
$("#submit").click(function() {
var name = $("#name").val();
var email = $("#email").val();
var password1 = $("#pass1").val();
var password2 = $("#pass2").val();
// Returns successful data submission message when the entered information is stored in database.
var dataString = 'name1=' + name + '&email1=' + email + '&password11=' + password1 + '&password22=' + password2;
if (name == '' || email == '' || password1 == '' || password2 == '') {
alert("Please Fill All Fields");
} else {
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "server.php",
data: dataString,
cache: false,
success: function(result) {
alert(result);
}
});
}
return false;
});
});
</script>
</div>
</div>
</div>
</div>