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 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 2

<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 3

输入值已通过DOM API用于Javascript：

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

Answer 4

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 5

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 6

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 7

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();
  }
}