Bootstrap btn类停止表单提交

时间:2017-07-12 07:19:07

标签: twitter-bootstrap

寻求一些帮助。我尝试在网页上创建我的登录信息,以便我在工作中创建并使用Bootstrap进行设置。

问题是我无法提交表单。在调试时,我发现添加Bootstrap btn类会阻止表单提交。如果我删除它,一切都会正常工作。

以下是之前和之后。

WORKING:          

    <div class="row">
        <div class="col-lg-12 text-center">
            <h1>Asset Performance Tool</h1>
            <p class="lead">Defining new ways to improve!!</p>
            <ul class="list-unstyled">
                <li>Bootstrap v3.3.7</li>
                <li>jQuery v1.11.1</li>
            </ul>
            <br><br>
            <a href="" class="btn btn-lg btn-default btn-block login" onclick="">Login</a>

            <!-- Login -->
            <div class="container" style="display: none;">
                <div class="row">
                    <div class="col-md-4 col-md-offset-4">
                        <div class="login-panel panel panel-default">
                            <div class="panel-heading">
                                <h3 class="panel-title">Please Sign In</h3>
                            </div>
                            <div class="panel-body">
                                <form method="post" action="">

                                    <div class="form-group">
                                        <input class="form-control" placeholder="E-mail" name="email" type="email" autofocus>
                                    </div>

                                    <div class="form-group">
                                        <input class="form-control" placeholder="Password" name="password" type="password" value="">
                                    </div>

                                    <div class="checkbox">
                                        <label>
                                            <input name="remember" type="checkbox" value="Remember Me">Remember Me
                                        </label>
                                    </div>

                                    <div class="submit">
                                        <button type="submit" class="btn-primary" name="submit">Submit</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- /.row -->
</div>
<!-- /.container -->

不工作:          

    <div class="row">
        <div class="col-lg-12 text-center">
            <h1>Asset Performance Tool</h1>
            <p class="lead">Defining new ways to improve!!</p>
            <ul class="list-unstyled">
                <li>Bootstrap v3.3.7</li>
                <li>jQuery v1.11.1</li>
            </ul>
            <br><br>
            <a href="" class="btn btn-lg btn-default btn-block login" onclick="">Login</a>

            <!-- Login -->
            <div class="container" style="display: none;">
                <div class="row">
                    <div class="col-md-4 col-md-offset-4">
                        <div class="login-panel panel panel-default">
                            <div class="panel-heading">
                                <h3 class="panel-title">Please Sign In</h3>
                            </div>
                            <div class="panel-body">
                                <form method="post" action="">

                                    <div class="form-group">
                                        <input class="form-control" placeholder="E-mail" name="email" type="email" autofocus>
                                    </div>

                                    <div class="form-group">
                                        <input class="form-control" placeholder="Password" name="password" type="password" value="">
                                    </div>

                                    <div class="checkbox">
                                        <label>
                                            <input name="remember" type="checkbox" value="Remember Me">Remember Me
                                        </label>
                                    </div>

                                    <div class="submit">
                                        <button type="submit" class="btn btn-primary" name="submit">Submit</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- /.row -->
</div>
<!-- /.container -->

PHP-CODE:

<?php

include 'php-scripts/UserLogin.php';
if (isset($_POST['submit']))
{
    $userSession = new UserLogin();
}
?>

我很难在这里看到这个问题,并想知道你们中是否有人可以帮助或者看到过类似的东西。

3 个答案:

答案 0 :(得分:0)

尝试替换

<button type="submit" class="btn btn-primary" name="submit">Submit</button>

要:

<input type="submit" class="btn btn-primary" name="submit" value="Submit">

答案 1 :(得分:0)

由于正在使用类型元素,但类型尚未设置为“按钮”,因此JavaScript正在发送回发请求。

之前

<button type="submit" class="btn btn-primary" name="submit">Submit</button>

之后:

<button type="button" class="btn btn-primary" name="submit">Submit</button>

答案 2 :(得分:-1)

Try changing

    <button type="button" class="btn btn-primary" id="submit-btn"> SUBMIT 
    </button>

# use jQuery and php #

$("#submit-btn").click(function() {
  if (isset)...........
}

# Create a js file #
# add jquery google api #
# write php isset funciton inside js file inside click function #