.getElementById working but not .getElementById().value?

Question

I'm trying to get data that a user enters in a form text box to be generated by javascript. The form code is: `form name="Guest Comment" method="get" onsubmit="return FormValidation()">

        <div style="margin-left:30%; margin-right:30%">
            <fieldset>
            <legend><b>New Comment</b></legend>
            <br><br>

            Name: &#160;&#160;&#160;&#160;&#160; <input type="text" id="name" name="name"><br><br>
            Comment: &#160;&#160; <input type="text" id="comment" name="comment" Style="height:200px;width:400px" ><br><br>


            <input type="button" name="submit" value="Submit Comment" onclick="Add()"/>
        </div>
    </form>`

When I use the function below, it works but it cut/pastes the text boxes. So the text box will be missing from where it was above the comment submit button, and now will be down below on the page.

<script type="text/javascript">
        function Add(){
            var newParagraph = document.createElement("P");
            var name = document.getElementById("name");
            newParagraph.appendChild(name);
            var comment = document.getElementById("comment");
            newParagraph.appendChild(comment);
            document.body.appendChild(newParagraph);
        }
        </script>

So I tried:

<script type="text/javascript">
        function Add(){
            var newParagraph = document.createElement("P");
            var name = document.getElementById("name").value;
            newParagraph.appendChild(name);
            var comment = document.getElementById("comment").value;
            newParagraph.appendChild(comment);
            document.body.appendChild(newParagraph);
        }
        </script>

But it does nothing. When I click submit nothing happens.

It's been a long couple days, what am I missing?

I don't know Jquery yet and I don't have time to learn it right this instant.

Edit: For example if the user enters: Name: [Rachel] Comment: [we had the most wonderful time at your establishment] and clicks submit, then below appears _______________________________________________________________ Rachel We had the most wonderful time at your establishment! ________________________________________________________________ (okay, i don't know why the comment is not showing what I'm typing the way I've typed it but the users name should be isolated, followed by a
then the users comment) –

Answer 1

HTML:

Name: <input type="text" id="name" name="name">
<br>
Comment: <input type="text" id="comment" name="comment">
<br>
<input type="button" name="submit" value="Submit Comment" onclick="add()"/>

add():

function add(){
    var newParagraph = document.createElement("p");
    var name = document.getElementById("name").value;
    var comment = document.getElementById("comment").value;
    newParagraph.innerHTML = name + "<br>" + comment;
    document.body.appendChild(newParagraph);
}

You need to set the innerHTML of the paragraph.

Here is a JSFiddle.

Answer 2

First off, parent.appendChild(node) takes a DOM node as an argument. If that DOM node is already in the document, it will be moved to the location specified.

Second off, document.getElementById(id) retrieves a DOM node. node.value gets the text from a form field. You cannot use that text as an argument to .appendChild(). If you want to insert a copy of that text somewhere in the DOM, then you would need to create a new DOM node, put the text that you obtained from node.value into that new DOM node and then parent.appendChild(newNode) that new DOM node.

If you can clarify exactly what you want the end result to look like (show what the HTML would look like after hitting the Add button), then we could offer an exact code solution for you. As your question stands now, it is not clear what you want the end result to be.

As a simple example, here's some code that reads from an input field and inserts that text into the DOM every time you press a button:

<input id="newComment" type="text" /><br>
<button onclick="add()">Add</button><br><br>
<div id="comments"></div>

<script>
function add() {
    var newText = document.getElementById("newComment").value;
    if (newText) {
        var paragraph = document.createElement("p");
        paragraph.textContent = newText;
        document.getElementById("comments").appendChild(paragraph);
    }
}
</script>

Working demo: http://jsfiddle.net/jfriend00/T7dtD/