#javascript #php #jquery #twitter-bootstrap
#javascript #php #jquery #twitter-bootstrap
Вопрос:
У меня есть две кнопки: войти и зарегистрироваться. Если я нажму кнопку входа в систему, должен открыться режим входа, а кнопка регистрации означает, что должен открыться режим регистрации.
Что я пытаюсь сделать, так это то, что после открытия register modal я хочу проверить форму и вставить значения в базу данных. Но когда я нажимаю register_submit, ничего не происходит.
<!-- Admin Extension -->
<script src="http://preview.oklerthemes.com/porto-admin/edge/assets/javascripts/theme.admin.extension.js"></script>
<script src="http://preview.oklerthemes.com/porto-admin/edge/assets/vendor/jquery-validation/jquery.validate.js"></script>
<script>
$(document).ready(function(){
$('#register_submit').click(function(){
alert();
if($('#registerForm').valid()){
/*$.ajax({
url:'register_bussiness.php',
type:'POST',
data: $('form#registerForm').serialize(),
success:function(data){
//var res=jQuery.parseJSON(data);// convert the json
console.log(data);
if(data == "Success"){
$('#btn-submit').prop('disabled', true);
$("#bussiness_suc_alert").show();
$("#bussiness_suc_alert").fadeOut(2000);
}
},
});*/
return false;
}
});
});
</script> <li><button class="btn btn-primary" data-toggle="modal" data-target="#registerModal">Register</button></li>
<li style="margin-left: 10px;"><button class="btn btn-primary" data-toggle="modal" data-target="#loginModal">Login</button></li>
<div class="container">
<div class="modal fade" id="loginModal" role="dialog">
<div class="modal-dialog" style="z-index: 9999;">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="padding:5px 50px;">
<button type="button" class="close" data-dismiss="modal">amp;times;</button>
<h4>Login</h4>
</div>
<div class="modal-body" style="padding:40px 50px;">
<form role="form">
<div class="form-group">
<label for="usrname">Username</label>
<input type="text" class="form-control" id="usrname" placeholder="Enter Name">
</div>
<div class="form-group">
<label for="psw"> Password</label>
<input type="text" class="form-control" id="psw" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox" value="" checked>Remember me</label>
</div><br>
<button type="submit" class="btn btn-info btn-block">Login </button>
</form>
</div>
</div>
</div>
</div>
<!--######
Login From End
#######--->
</div>
<div class="container">
<div class="modal fade" id="registerModal" tabindex="-1" role="dialog" aria-labelledby="smallModalLabel" aria-hidden="true">
<div class="modal-dialog" style="z-index: 9999;">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="padding:5px 50px;">
<button type="button" class="close" data-dismiss="modal">amp;times;</button>
<h4>Register</h4>
</div>
<div class="modal-body" style="padding:40px 50px;">
<form method="POST" id="registerForm" class="form-horizontal form-bordered">
<div class="form-group">
<label for="usrname"> Username</label>
<input type="text" class="form-control" id="username" placeholder="Enter name">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="text" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="psw">Password</label>
<input type="text" class="form-control" id="psw" placeholder="Enter password">
</div>
<div class="form-group">
<label for="psw"> Mobile</label>
<input type="text" class="form-control" id="psw" placeholder="Mobile Number">
</div><br>
<!--<button type="submit" class="btn btn-info btn-block">Submit</button>-->
<input type="button" class="btn btn-info btn-block" id="register_submit" name="submit" value="INVITE QUOTES">
</form>
</div>
</div>
</div>
</div>
</div><!-- /.container --> Комментарии:
1. попробуйте создать автономную js-функцию (не внутри готового документа), вызываемую
function register(), а затем вы можете вызвать ее черезonclick=register()событие на вашей кнопке2. Что не работает? Я вижу, что вы отключили свой код в своей отправке, вот почему. Ваш модальный не закрывается? .. Я не понимаю, что вы имеете в виду, это не работает?
Ответ №1:
ДЕМОНСТРАЦИЯ прилагается
$("#submitRegister").on("click", function () {
var errorCount = 0;
$("#registerForm input").each(function (idx, li) {
if ($(this).val() == "") {
errorCount
}
});
if (errorCount > 0) {
alert("Please fill up the form")
return false;
}
else
$("#registerForm").submit();
}); <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#login">login</button>
<!-- Modal -->
<div class="modal fade" id="login" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">amp;times;</button>
<h4 class="modal-title">login</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#register">register</button>
<!-- Modal -->
<div class="modal fade" id="register" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">amp;times;</button>
<h4 class="modal-title">Register </h4>
</div>
<form method="POST" id="registerForm" class="form-horizontal form-bordered">
<div class="modal-body">
<div class="form-group">
<label for="usrname"> Username</label>
<input type="text" class="form-control" id="username" placeholder="Enter name">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="text" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="psw">Password</label>
<input type="text" class="form-control" id="psw" placeholder="Enter password">
</div>
<div class="form-group">
<label for="psw"> Mobile</label>
<input type="text" class="form-control" id="psw" placeholder="Mobile Number">
</div><br>
</div>
<div class="modal-footer">
<button type="button" id="submitRegister" class="btn btn-info btn-block">INVITE QUOTES</button>
</div>
</form>
</div>
</div>
</div>
</div>