Form

by doug65536

HTML

<div>
    Input <input name="input" /><br/>
    Select <select name="select">
        <option value="1">1</option>
        <option value="2">2</option>
    </select><br/>
    Textarea <textarea name="textarea"></textarea><br/>
    Checkbox <input type="checkbox" name="checkbox" /><br/>
    Password <input type="password" name="password" /><br/>
    Button <button type="button">Test</button><br/>
</div>

<div id="huge"></div>

<div id="log"></div>

JavaScript

$(function () {
    var out = function(m) {
        $('#log p').css({color: 'grey'});
        $('#log').prepend($('<p>').text(m));
    };
    $('button').on('click', function () {
        var data = {};
        $(':input').each(function (i,v) {
            var item = $(v);
            var name = item.attr('name');
            if (name) {
                data[name] = item.val();
            }
        });
        out(JSON.stringify(data));
    });
    
    var huge = $('#huge');
    for (var i = 0; i < 1000000; ++i) {
        (function(i) {
            huge.append($('<input>').attr('name', 'huge' + i).val('huge value ' + i).on('blur', function() {
                out('blur ' + i);
            }));
        }(i));
    }
});