Question

I have this 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 />"));
    });
});

What it do is it reads form elements then types them as regular text (there is a purpose for this).

And this is how my form looks like …

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

now, when I click the button “Generate”, everything goes well except that it ignores “another_field” and doesn’t get its value

Anyone got an idea to solve this? (Note: This piece of code will be running on around 25 forms so I need to have it working.)

UPDATE:

Sample output:

Name : username @ Some Text
Customer Telephone Number :  90237590 // 3298579
Customer Email Address : [e-mail]
***************
Best Regards,
last_field
last thing 

Workaround

Since I’m having all the forms have the same ending, I’ve been able to get to this code:

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;

It solved the problem, but I’m looking for a better way to accomplish this.

Answer 1

Try this 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(""));
    });
});

Working example here:

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