CODEWITHSUNDEEP
javascriptjqueryhtmlformstwitter-bootstrap
AlpharettaTechy
AlpharettaTechy

Reputation: 390

How to use bootstrap form layout without actually using <form>?

We need the formatting and layout that comes with using something like the following but we don't want the traditional HTML form (we use ajax, javascript to pull/set data on our controls). The problem is when you hit 'enter' the page assumes you are submitting a form, probably because there is form tag (but there was no submit button, so maybe it is defaulting to one of the buttons, but that's a different story):

<form role="form" class="form-horizontal">      
        <legend>Product Header Information</legend>
        <div class="form-group form-group-sm">
            <label for="pid" class="control-label field_name2 col-xs-4 col-sm-4 col-md-3">Product ID:</label>
            <div class="col-xs-8 col-sm-4 col-md-4">
                    <input class="form-control" id="pid" />
            </div>
        </div>
.....
</form>

Upvotes: 12

Views: 9297

Answers (2)

AlpharettaTechy
AlpharettaTechy

Reputation: 390

Here is the answer, simply replace "form" with "div", that seems to work great in firefox, IE & Chrome. It does makes sense.. I need css classes, I use css classes, who cares on what tag?

<div class="form-horizontal">      
        <legend>Product Header Information</legend>
        <div class="form-group form-group-sm">
            <label for="pid" class="control-label field_name2 col-xs-4 col-sm-4 col-md-3">Product ID:</label>
            <div class="col-xs-8 col-sm-4 col-md-4">
                    <input class="form-control" id="pid" />
            </div>
        </div>
.....
</div>

Upvotes: 20

Timur Osadchiy
Timur Osadchiy

Reputation: 6209

Using form is the right way. In order to prevent the form from refreshing the page on submit you can use jQuery:

("form").on("submit", function () { /*your ajax*/ return false; });

Upvotes: 1

Related Questions