How to pass a user entered form value from html to javascript?

Question

It is possible to pass a value from javascript to html by writing it to a tag. However, if I would wish to pass a user defined value (etc, entered by the person viewing the webpage) to java script so I can do things with it, what would be the most easiest way possible?

At the moment, I have something like this:

 <div class="entry foreground-color">
     <form>
         <input type="text" name="commands" size="60"/>
     </form>
 </div>

How can I make the value from the form be passed to my javascript?

Or, am I going in a totally wrong direction? If so, what would be the correct way to get user input, and pass it on to javascript?

EDIT: Apologies for my misuse of terminology. I am making a text based adventure game, and I want the user to be able to type in a response, press enter, and have the response be sent to javascript, so I can use javascript to evaluate the response (etc "go south", "go north"), and write back to the element with the new situation (etc "as you went south, you found a troll").

Answer 1

You are in the right path :)

For example you can do something like this (see http://jsfiddle.net/ahLch/):

HTML:

<h1 id="commandsExample"></h1>
<div class="entry foreground-color">
   <form>
     <input type="text" id="commands" size="60"/>
   </form>
</div>

JavaScript:

var input = document.getElementById('commands');
var example = document.getElementById('commandsExample');

input.addEventListener('change', function () {
   example.innerHTML= input.value;
});

A couple of things to note:

• If you are new to JavaScript, and you wish to make your code cross browser (especially if you want to target old versions of IE), take a look to jQuery.

• If you wish to learn how to use plain DOM APIs provided by the browser without the jQuery layer, take a look to: http://youmightnotneedjquery.com/ (it's very useful once that you learned jQuery basics).

• There are a couple of ways to get the value:

  • Intercepting from submmit event: I don't recommend it, you have to take care of avoiding the default submit behavior, and you have to create a form around your input field. That was necessary in old browsers, but today is not.

  • change event: it's fired when the input value has changed and the input looses the focus (is the usual event used for form validation).

  • keydown and keyup: they give you more control, by capturing each keystroke, but it's lower level than the change event. For a complete reference see: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent

• Use "id" instead of "name". Name is only necessary when you want to submit the value, in new browsers you can leave just input tag without a form.

Answer 2

Getting the value of the input tag is quite easy with jQuery. (I take it you need this anyway to actually send the message via AJAX to a server..?)

$("#idofinput").val(); will copy the value, $("#idofinput").val(''); will empty it.

You probably want to do this without actually submitting a form. Recreating one in javascript isn't to hard. For the submit on enter you can use something like this:

function checkEnter(e)
{
  var keynum;
  if(window.event) // IE8 and earlier
  {
   keynum = e.keyCode;
  }
  else if(e.which) // IE9/Firefox/Chrome/Opera/Safari
  {
    keynum = e.which;
  }
  if(keynum==13)
  {
    sendMessage();
  }
}

Answer 3

You can just stop the form from submitting and get the value:

HTML:

<div class="entry foreground-color">
    <form onsubmit="return getValue('commands')">
        <input type="text" name="commands" size="60" id="commands"/>
    </form>
</div>

JavaScript:

function getValue (id) {
    text = document.getElementById(id).value; //value of the text input
    alert(text);
    return false;
}

Fiddle: Fiddle

If you want to clear the box afterwards, use:

document.getElementById(id).value = '';

Like so:

function getValue (id) {
    text = document.getElementById(id).value; //value of the text input
    alert(text);
    document.getElementById(id).value = '';
    return false;
}

Answer 4

To get the value of an HTML element, first, you need to get the desired element (you can use theses methods):

• getElementById
• getElementsByTagName
• getElementsByClassName
• querySelector (moderns browsers)
• querySelectorAll (moderns browsers)

Theses methods depending on document (documentation).

So in your case you can try something like this:

var inputs = document.getElementsByTagName('input'),
    commandValue = null;
for (var i = 0; i < inputs.length; i++) {
 if (inputs[i].name === "commands") {
    commandValue = inputs[i].value; // get the element value
 }
}
alert (commandValue); // show the value

But you need to set a "catcher" on the form default action. So:

<form>

Become:

<form onsubmit="return getValue()">

And you set the javascript code above in the getValue function:

function getValue() {
    var inputs = document.getElementsByTagName('input'),
        commandValue = null;
    for (var i = 0; i < inputs.length; i++) {
     if (inputs[i].name === "commands") {
        commandValue = inputs[i].value; // get the element value
     }
    }
    alert (commandValue); // show the value
    return false; // prevent default form action
};

Answer 5

You can get the value of your input control using:

document.getElementsByName("commands")[0].value;

Since getElementsByName() method returns an Array of elements with specified name, you will need to take the first element assuming that there is only one elements with name attribute commands.

Instead of that, for simplicity and uniqueness, i suggest you use the famous way to achieve that using id attribute and getElementById() method.

Answer 6

<input type="text" name="commands" size="60" id="commands"/>   

var input = document.getElementById("commands").value;

or

  document.getElementsByName( "commands" )[0].value

now do anything with this

Answer 7

The input value is already available for Javascript via DOM API:

document.getElementsByName( "commands" )[0].value