Submit button got disabled when clicked in bootstrap3 and data is not being sent to database

Question

I am working on a signup page with bootstrap I am using http://bootstrapvalidator.com/ plugin to validate my form. All validation done but when I click on submit button it got disables and data is not sent to next php file, Please help me , My codes are below. HTML Code

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" href="bootstrap/css/bootstrapValidator.min.css"/>
    <script type="text/javascript" src="bootstrap/js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
    <!-- Either use the compressed version (recommended in the production site) -->
    <script type="text/javascript" src="bootstrap/js/bootstrapValidator.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
$('#signupbox').bootstrapValidator({
live: 'enabled',
    message: 'This value is not valid',
    feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
        firstName: {
            validators: {
                notEmpty: {
                    message: ' '
                },
                stringLength: {
                    min: 2,
                    max: 30,
                    message: ' '
                },
                regexp: {
                    regexp: /^[a-zA-Z ]+$/,
                    message: ' '
                }
            }
        },
        lastName: {
            validators: {
                notEmpty: {
                    message: ' '
                },
                stringLength: {
                    min: 3,
                    max: 30,
                    message: ' '
                },
                regexp: {
                    regexp: /^[a-zA-Z ]+$/,
                    message: ' '
                }
            }
        },

        email: {
            validators: {
             notEmpty: {
                    message: ' '
                },
                emailAddress: {
                    message: 'The input is not a valid email address'
                },
                 regexp: {
                    regexp: /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i,
                    message: ' '
                }
            }
        },
        password: {
            validators: {
                notEmpty: {
                    message: 'The password is required and cannot be empty'
                },


            }
        },
        confirmPassword: {
            validators: {
                notEmpty: {
                    message: 'The confirm password is required and cannot be empty'
                },
                identical: {
                    field: 'password',
                    message: ' '
                }

            }
        }


    }

});

// Validate the form manually
});


</script>



</head>

<body>



    <div id="signupbox" style="margin-top:50px;" class="mainbox col-md-4 col-md-offset-4 col-sm-1 col-sm-offset-3">
                <div class="panel panel-info">
                    <div class="panel-heading">
                        <div class="panel-title">Sign Up</div>
                        <div style="float:right; font-size: 85%; position: relative; top:-15px"><a id="signinlink" href="login.php">Sign In</a></div>
                    </div>  
                    <div class="panel-body" >
                        <form id="signupform" class="form-horizontal" action="submit.php" method="GET" role="form" >

                            <div id="signupalert" style="display:none" class="alert alert-danger">
                                <p>Error:</p>
                                <span></span>
                            </div>

                             <div class="form-group">

                        <div class="col-lg-6">
                            <input type="text" class="form-control" name="firstName" placeholder="First name" />
                        </div>
                        <div class="col-lg-6">
                            <input type="text" class="form-control" name="lastName" placeholder="Last name" />
                        </div>
                    </div>





                            <div class="form-group has-feedback">

                                <div class="col-md-12">
                                    <input type="text" class="form-control" name="email" placeholder="Email Address">
                                </div>
                            </div>

                            <div class="form-group">

                                <div class="col-md-12">
                                    <input type="date" class="form-control" name="bday" placeholder="Date of Birth">
                                </div>
                            </div>

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

                              <div class="form-group">
                               <div class="col-md-12">
                                    <input type="password" class="form-control" name="confirmPassword" placeholder="Confirm Password">
                                </div>
                            </div>




                            <div class="form-group">
                                <!-- Button -->                                        
                                <div class="col-md-offset-0 col-md-9">
                                    <input type="submit" id="submit" style="float:left;" class="btn btn-info" value="Signup">


                                </div>
                            </div>





                        </form>
                     </div>
                </div>




     </div> 




</body>

Arkni · Answer 1 · 2014-09-08T21:47:34.833

1

Your problem is that you're using submit as id for the submit button.

For example, you cannot submit the form after validating if use submit as id or to name the Submit button:

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

Or

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

Changing the id of your submit button to something else will fix the issue.

See the name conflict warning in the official docs.

edited Sep 08 '14 at 21:47

answered Sep 08 '14 at 18:10

Arkni

1,177
9
15

I know I'm late to the party on this but seriously? The Bootstrap validator overrides a **valid** html attribute and just disables it? Thank you for the info, as I searched for days on this and just now found your answer. I know how to get around it, but this is awful. – McAuley Jul 26 '20 at 22:46

score 0 · Answer 2 · answered Sep 03 '14 at 05:43

0

In your form page your were using method="GET" method to pass the data.

<form id="signupform" class="form-horizontal" action="submit.php" method="GET" role="form" >

try to use method="POST" and see whether its working.

 <form id="signupform" class="form-horizontal" action="submit.php" method="POST" role="form" >

answered Sep 03 '14 at 05:43

Raa

154
12

@ALiiRaja did you try my solution ? – Arkni Sep 16 '14 at 19:34

Submit button got disabled when clicked in bootstrap3 and data is not being sent to database

2 Answers2