JQuery忽略表单元素

时间:2012-01-02 20:39:14

标签: javascript jquery html

我有这个JQuery:

$(document).ready(function() {
    $("#generate").click(function() {
        var texts = [];
        alert();
        $("form label").each(function() {
            var oLabel = $(this);
            var oInput = oLabel.next();
            texts.push(oLabel.text() + " " + oInput.val());
        });
        texts[0] += texts[1];
        texts[2] += texts[3];
        for(i=3;i<texts.length;i++)
            texts[i-1] = texts[i];
        texts[texts.length-1] = null;
        $("#cont").html(texts.join("<br />"));
    });
});

它做的是读取表单元素然后将它们键入常规文本(这是有目的的。)

这就是我的表格看起来像......

<div id="cont" style="float:right; width:75%; height:auto">
    <form onSubmit="return generate();">
      <label class="itemLabel" for="name">Name : </label>
        <input name="name" type="text" class="itemInput" value="<? echo $queryB[1]; ?>" readonly="readonly" />

        <label>@ Some Text</label><br />
        <label for="priPhone" class="itemLabel">Customer Telephone Number : </label>Phone#
        <input name="priPhone" type="text" class="itemInput" readonly="readonly" value="<? echo $queryB[2]; ?>" />

        <label for="secPhone"> // Mobile#</label>
        <input name="secPhone" type="text" class="itemInput" readonly="readonly" value="<? echo $queryB[3]; ?>" /><br />
        <label class="itemLabel" for="email">Customer Email Address : </label>
        <input name="email" type="text" class="itemInput" readonly="readonly" value="<? echo $queryB[4]; ?>" /><br />

        <label>***************</label><br />
        <label>Best Regards,</label><br />
        <input name="another_field" type="text" /><br />
        <label>last thing</label><br />
        <button type="button" id="generate">Generate</button>
    </form>
</div>

现在,当我点击“Generate”按钮时,一切顺利,只是它忽略了“another_field”并且没有得到它的值

有人有想法解决这个问题吗? (注意:这段代码将在大约25个表单上运行,所以我需要让它工作。)

更新

示例输出:

Name : username @ Some Text
Customer Telephone Number :  90237590 // 3298579
Customer Email Address : email@host.com
***************
Best Regards,
last_field
last thing 

解决方法

由于我所有的表单都有相同的结尾,我已经能够得到这段代码:

texts[0] += " " + texts[1];
texts[1] = texts[2] + " " + texts[3];
for(i=4;i<texts.length;i++)
    texts[i-2] = texts[i];
texts[texts.length-2] = texts[texts.length-3];
texts[texts.length-3] = $("#agent").val() ;
texts[texts.length-1] = null;

它解决了这个问题,但我正在寻找一种更好的方法来实现这个目标。

2 个答案:

答案 0 :(得分:3)

试试这个javascript:

$(document).ready(function() {
    $("#generate").click(function() {
        var texts = [];
        $("form").children().each(function() {
            var el = $(this);
            if (el.prop('tagName') == "LABEL") texts.push(el.text());
            if (el.prop('tagName') == "INPUT") texts.push(el.val());
            if (el.prop('tagName') == "BR") texts.push("<br />");
        });
        $("#cont").html(texts.join(""));
    });
});

这里的工作示例:

http://jsfiddle.net/Q5AD4/6/

答案 1 :(得分:3)

你的&lt; br /&gt; tag是“another_field”之前的标签之后的下一个标签。您可能应该拨打下一个电话:

var oInput = oLabel.next('input');