converting form to plain text

Question

I have a page that generates forms depending on user choice. I want to know if there is a way to convert the form into plain text? Ex. The form has 4 fields, each has a label. I would like to take all the labels/fields and print them to the user as follows:

label1 field1
label2 field2
label3 field3
label4 field4

Is there a way to do so?

Answer 1

You can use jQuery to generate basic output, for example:

var texts = [];
$("form label").each(function() {
    var oLabel = $(this);
    var oInput = oLabel.next();
    texts.push(oLabel.text() + " - " + oInput.val());
});
var plainText = texts.join("<br />");
$("#Output").html(plainText);

This will iterate over all the form labels, then take the next element of each label which is the input.

Live test case.

Answer 2

If you don't mind an extra file, with PHP.

You'd need to make a small php file to echo all the form information like this:

<?php
$label1 = "label1";
$label2 = "label2"; //Set all labels here
$label3 = "label3";
$label4 = "label4";
echo $label1 . " " . $_POST['field1'] . "<br />"; //Change to get depending on your method.
echo $label2 . " " . $_POST['field2'] . "<br />";
echo $label3 . " " . $_POST['field3'] . "<br />";
echo $label4 . " " . $_POST['field4'] . "<br />";
echo "Done.";
?>

and put that in it's own file. Set the form's action attribute to that file and it will print out all the data.

Answer 3

One method, without a JavaSCript library, is:

var form = document.getElementsByTagName('form')[0];

form.onsubmit = function(){

    var labels = document.getElementsByTagName('label');

    if (!document.getElementById('container')){
        var container = document.createElement('ol');
        container.id = 'container';
    }
    else {
        var container = document.getElementById('container');
        while (container.firstChild){
            container.removeChild(container.firstChild);
        }
    }

    for (var i=0,len=labels.length; i<len; i++){
        if(document.getElementById(labels[i].getAttribute('for'))){
            var newLi = document.createElement('li');
            var iText = document.createElement('span');
            newLi.innerHTML = labels[i].innerHTML;
            iText.innerHTML = document.getElementById(labels[i].getAttribute('for')).value;
            newLi.appendChild(iText);
            container.appendChild(newLi);
        }
    }

    document.getElementsByTagName('body')[0].appendChild(container);

    return false;

};

JS Fiddle demo.

References:

• node.appendChild()
• document.createElement().
• document.getElementById().
• document.getElementsByTagName().
• element.getAttribute().
• element.innerHTML.
• for () {...}.
• node.firstChild.
• node.removeChild().
• while () {...}.

Answer 4

You may get the value for labels and fields in javascript using

var label1 = getElementById("id").name

Create a string formatted as you want to show the user and show all the values with

document.write(string);