单击按钮时模态消失

时间:2016-09-09 03:46:01

标签: javascript jquery html

如果在“电话号码”字段中输入值,则模态会消失。 我想显示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>

0 个答案:

没有答案