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

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

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.

Leave a Reply

Your email address will not be published. Required fields are marked *