如果在“电话号码”字段中输入值,则模态会消失。 我想显示OTP的输入字段和提交的输入按钮。 if部分工作正常但是else部分解雇了模态。
这是我的代码:
<form id="login-form">
<div class="modal-body">
<div id='error' class='alert alert-warning hide'></div>
<fieldset>
<input id="phone" class="form-control" type="text" placeholder="Enter 10 digit phone number">
</fieldset>
<input id="otp" class="form-control" type="text">
<input type="submit" id="otpbtn"
class="btn btn-default btn-block btn-primary loginbtn" value="Get OTP">
<input type="submit" id="loginotpbtn"
class="btn btn-default btn-block btn-primary loginbtn" value="Login">
</div>
<div class="modal-footer">
<hr>
<div>
Don't have an account?
<button type="submit"
class="btn btn-default btn-primary signupbtn">Sign Up</button>
</div>
</div>
</form>
这是我的JQuery代码:
$(document).ready(function() {
$("#loginref").click(function() {
$("#otpbtn").show();
$("#otp").hide();
$("#loginotpbtn").hide();
});
});
$('#otpbtn').on('click', function(event){
var errorDiv = $('#error');
errorDiv.addClass('hide').empty();
var ph = $('#phone').val();
if ($.trim(ph) == '')
{
errorDiv.removeClass('hide').append('Phone No is required');
event.preventDefault();
}
else{
$("#otpbtn").hide();
$("#otp").show();
$("#loginotpbtn").show();
}
});
我已经包含了这些脚本:
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/index2.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>