CODEWITHSUNDEEP
javascripthtmltwitter-bootstrap
Davide Scicolone
Davide Scicolone

Reputation: 61

bootstrap modal form not submitted

I've the following html code related to a bootstrap modal form. When the user focus on a specific text field and press enter, the form is not submitted. If, instead, I remove one of the two "input" tags (first or last name), it works (and the alert is shown). How could be?

<html>
<head>
<link href="../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <div class="modal fade" id="modal-user" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Enter your name</h4>
                </div>
                <div class="modal-body">
                    <form id="contact_form" action="javascript:alert('test')"
                        method="POST">
                        First name: <input type="text" name="first_name"><br />
                        Last name: <input type="text" name="last_name"><br />
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" id="submitForm" class="btn btn-default">Send</button>
                </div>
            </div>
        </div>
    </div>

    <!-- jQuery -->
    <script src="../vendor/jquery/jquery.min.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="../vendor/bootstrap/js/bootstrap.min.js"></script>

</body>

</html>

Upvotes: 0

Views: 1827

Answers (2)

Davide Scicolone
Davide Scicolone

Reputation: 61

I've discovered that a form with more than 2 fields needs always to have a submit button in order to be correctly submitted (through the button or through the "return" key) even if you don't want that the user uses the button (in this case you can set display none to the button)

Upvotes: 0

Peter Huang
Peter Huang

Reputation: 1178

Put the send button inside form and make it type='submit'.

Upvotes: 2

Related Questions