Question

I am inexperienced so sorry if this is a dumb question but I’m looking around and I haven’t found an answer that works for me. I am using JavaScript and I have an html form with one text input. When someone enters a value for that input and submits the form I want to return to the same HTML page but with what they entered displayed elsewhere on the page. Here is my form:

<form name="chatInput" action="index.html"  method="get">
        chat:<input type="text" name="chat"/>
</form>

I saw something about having:

var chatText = document.forms[0].elements[0];

But when I try to use this I get [object HTMLInputElement]

Also I would only want to create that variable if the form has been entered once already but not initially. How would I check for this?

Thanks for any info.

Answer 1

If you don’t want to re-update the html, I’d recommend not using the form tag.

Instead, I’d create a button with the onclick attribute.

<input type="button" value="Update" onclick="someFunction()">

Then in the JS portion, have something like this.

var someFunction = function(){
    var chatText = document.getElementById("this-is-the-element-I-want").value;
}

Of course, make sure that the element you are trying to retrieve info from has an id.

<input type="text" name="chat" id="this-is-the-element-I-want">

EDIT: Code indents and clarity