Bootstrap btn class stopping form submission

Question

Looking for some help. I'm trying to create my login in page for an app I'm creating at work and using Bootstrap to style.

The issue is that I cannot get my form to submit. While debugging, I have found that adding the Bootstrap btn class stops the form from submitting. If i remove it, everything works as should.

Below is a before and after.

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 -->

NOT 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 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();
}
?>

I'm struggling to see the issue here, and wondering if any of you could help or may have seen something similar.

Can you give a link or a fiddle where we can see the issue please. — BENARD Patrick, Jul 12 '17 at 07:50

score 0 · Answer 1 · answered Jul 12 '17 at 07:27

0

Try to replace the

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

To:

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

answered Jul 12 '17 at 07:27

Clyde Dexter Santiago

91
2
11

same thing. If I remove the btn class works fine. Add it back in...nothing. – demonLaMagra Jul 12 '17 at 07:30

score 0 · Accepted Answer · answered Jan 24 '19 at 11:42

JavaScript is sending a post-back request due to the fact a type element is being used but the type has not been set to "button".

before:

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

after:

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

Aniket · Answer 3 · 2017-07-12T08:06:15.347

-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 #

edited Jul 12 '17 at 08:06

answered Jul 12 '17 at 07:36

Aniket

51
5

If you set the button as `type=button`, it won't submit the form...., read this post https://stackoverflow.com/questions/6617212/add-regular-button-inside-form-that-does-not-perform-a-submit – BENARD Patrick Jul 12 '17 at 07:39
Still the same issue persists. The issue definitely resides with adding the btn class to the element. – demonLaMagra Jul 12 '17 at 07:39

Bootstrap btn class stopping form submission

3 Answers3