Form serialize doesn't work

Question

I'vegot following ICanHaz form template:

<script id="outcomeFormTemplate" type="text/html">
    <form id="xyz" class="form-horizontal well" data-async data-target="#outcomeFormDialog" method="POST">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
            <h3 id="myModalLabel">Add outcome</h3>
        </div>
        <div class="modal-body">
            <fieldset>
                <label>Amount</label>
                <div class="input-append">
                    <input type="text" placeholder="00.01" />
                    <span class="add-on">{{ currency }}</span>
                </div>
                {{>UserSelectTemplate}}
                {{>CategorySelectTemplate}}
                <label>Comment</label>
                <input type="text" placeholder="Comment here..." />
            </fieldset>
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary">Save outcome</button>
        </div>
    </form>
</script>

It is rendered as follows:

<form id="xyz" class="form-horizontal well" data-async="" data-target="#outcomeFormDialog" method="POST">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
            <h3 id="myModalLabel">Add outcome</h3>
        </div>
        <div class="modal-body">
            <fieldset>
                <label>Amount</label>
                <div class="input-append">
                    <input type="text" placeholder="00.01">
                    <span class="add-on">zł</span>
                </div>
                <label>User</label>
    <select>
        <option>choose user</option>
                <option value="pmc">Paul McCartney</option>
                <option value="jl">John Lennon</option>
                <option value="gh">George Harrison</option>
                <option value="rs">Ringo Starr</option>
        </select>
                <label>Category</label>
    <select>
        <option>choose category</option>
                <option value="1">food</option>
                <option value="2">bills</option>
                <option value="3">electronics</option>
                <option value="4">entertainment</option>
                <option value="5">travels</option>
                <option value="6">bread</option>
                <option value="7">bar</option>
                <option value="8">fruits &amp; vegs</option>
                <option value="9">press</option>
                <option value="10">transport</option>
                <option value="11">lunch</option>
                <option value="12">books</option>
                <option value="13">chemistry</option>
                <option value="14">hygiene</option>
                <option value="15">household goods</option>
                <option value="16">house</option>
                <option value="17">rent</option>
                <option value="18">internet</option>
                <option value="19">repairs</option>
                <option value="20">presents</option>
                <option value="21">tools</option>
                <option value="22">cinema</option>
                <option value="23">footwear</option>
                <option value="24">clothing</option>
                <option value="25">| Chmielewskiego</option>
                <option value="26">flowers</option>
                <option value="27">gas</option>
                <option value="28">electricity</option>
                <option value="29">phones</option>
                <option value="30">meds</option>
                <option value="31">meat</option>
                <option value="32">takeaway</option>
                <option value="33">cosmetics</option>
                <option value="34">education</option>
                <option value="45">theatre</option>
                <option value="47">alcohol</option>
                <option value="48">barber</option>
                <option value="49">health</option>
                <option value="50">doctor</option>
                <option value="51">collectibles</option>
                <option value="52">fish</option>
                <option value="53">handout</option>
                <option value="55">souvenirs</option>
        </select>
                <label>Comment</label>
                <input type="text" placeholder="Comment here...">
            </fieldset>
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary">Save outcome</button>
        </div>
    </form>

The problem is that .serialize() returns empty string. Why is that? Something wrong with my html structure?

$("#xyz").serialize()
""

Answer 1

You need to set the names of the form fields. Otherwise it doesn't know how to name the fields. I've never tried it without so I don't know what usually happens but this would make sense.

For example:

<select name="user">