Amegabosco’s Weblog

Believe it, it has already happened !!:

Archive pour octobre, 2013

Convert form data to JS object with jQuery

http://stackoverflow.com/questions/1184624/convert-form-data-to-js-object-with-jquery

 

accepted

serializeArray already does exactly that, you just need to massage the data into your required format:

$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

 

 

http://stackoverflow.com/questions/12252815/how-to-use-labels-inside-of-a-control-row

 

3
down vote
favorite
2
I’m trying to use a Boostrap to layout a form with horizontal row inputs (a la « control-row ») but have labels positioned above the form input. See the layout below for an example.

Is this possible with Boostrap? I’m trying to avoid resorting to a million row/span# divs, but can’t find another way of implementing this without a lot of custom CSS. My current plan is to test out using tables :/ Please save me from that fate!

LABEL1 LABEL2
| Input | | Input |

LABEL 3
| Long input |

LABEL 4 LABEL 5
| Input | | Input |
css twitter-bootstrap
share|improve this question
edited Jan 28 at 12:19

Oldskool
7,24511234
asked Sep 3 ’12 at 18:55

user1644447
1613

jsfiddle.net/D2RLR/2321 – too many divs/spans? – David Spence Oct 3 ’12 at 13:28

You might want to edit the title of your question, since it says, BOOstrap (a Halloween pun, perhaps?), @user1644447 – Jonathan M Oct 12 ’12 at 13:24
1 Answer
activeoldestvotes
up vote
3
down vote
I was able to get this accomplished without the use of tables, using a combination of control-row and control-group classes.

First Name:

M.I.:

Last Name:

Social Security Number:

Date of Birth:

​​​​​​​​​​​​​​​

In order to get it to work correctly though (since control-group divs are display: block;, I had to override that class and add a vertical-align: top; with the following):

.control-group {
display: inline-block;
vertical-align: top;
}
Here’s how it turned out: http://jsfiddle.net/bhGyz/