表单序列化不起作用

时间:2013-03-30 18:39:21

标签: jquery forms serialization twitter-bootstrap

我关注ICanHaz表单模板:

<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>

呈现如下:

<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>

问题是.serialize()返回空字符串。这是为什么?我的html结构出了什么问题?

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

2 个答案:

答案 0 :(得分:31)

您需要设置表单字段的名称。否则它不知道如何命名字段。我没有尝试过,所以我不知道通常会发生什么,但这是有道理的。

例如:

<select name="user">

答案 1 :(得分:5)

serialize() 查找输入的名称属性,因此请在其输入的输入中使用name属性。

<label>Amount</label>
<div class="input-append">
    <input type="text" name='amt' placeholder="0.01">
    <span class="add-on">zł</span>
</div>

如上所述在其输入的输入中使用name属性。