html - 一部の入力が送信されませんでした

Question

HTML フォームがありますが、アクティブであっても入力内容の一部が送信されません。http://jsfiddle.net/hbw3/qzcTS/2/の実際の例。

フォームには明らかに多数の div が含まれていますが、1 つの div の入力のみが送信されます。どうしてこれなの？

HTML ソース:

<form accept-charset="UTF-8" action="whatever" id="map_form" method="post">
    <table>
        <tr>
            <td>
                <select id=1 name=col_1 class="column_select">
                    <option value="0">None</option>
                    <option value="1">id (integer)</option>
                    <option value="2">name (string)</option>
                </select>
            </td>
            <td>
                <select id=2 name=col_2 class="column_select">
                    <option value="0">None</option>
                    <option value="1">id (integer)</option>
                    <option value="2">name (string)</option>
                </select>
            </td>
        </tr>
    </table>
    <div class="span4" id="default_values">
        <label for='id' class='control-label'>id (integer)</label>
        <input type='text' id='id' />
        <label for='name' class='control-label'>name (string)</label>
        <input type='text' id='name' />
    </div>
    <input name="commit" type="submit" value="Upload Table" />
</form>
<div id='result'></div>

送信された入力を表示する JS:

$('form#map_form').submit(function () {
    $('div#result').text($(this).serialize());
    return false;
})