14

I am new to HTML forms and I was wondering how I can easily (or not) change it's input to a JavaScript variable. Here is my code:

<head>
<title>Begin</title>
<link type="text/css" rel="stylesheet" href="begin.css"/>
</head>
<body>
<form action="begin-create-done.html" method="get">
First Name: <input type="text" name="firstname">
<br>
Last Name: <input type="text" name="lastname">
<br>
<br>
New Username: <input type="text" name="user">
<br>
Password: <input type="password" name="pass">
<br>
Repeat Password: <input type="password" name="rpass">
<input type="submit" value="Submit">
</form>
</body>
</html>

I want each part of the form (e.x. First Name, Last Name, New Username, etc.) to be it's own JavaScript variable. Thank you very much!

user3697292
  • 143
  • 1
  • 1
  • 4
  • What if input changes? Should JavaScript variable value change too? Also what if JavaScript variable value changes? Should input value change too? – jsalonen Jun 01 '14 at 18:02

3 Answers3

11

Accessing HTML input elements from JavaScript

Assuming you don't have other elements with same names, you can access input values from JavaScript by name as follows:

var firstName = document.getElementsByName("firstname")[0].value;

You now have the value from firstname field in JavaScript variable called firstName. Just keep repeating and you got the other input fields too. You can then proceed and wrap these statements to a function and call it when input data changes. For example:

function formChanged() {
    var firstName = ...
    var lastName = ...
}

Now register this function call to change / keyup events and you have a function that monitors changing form values:

<input type="text" name="firstname" onkeyup="formChanged()" onchange="formChanged()"/>
jsalonen
  • 29,593
  • 15
  • 91
  • 109
3

Should you prefer a more structured approach, or if you have more than one form on the page, you could:

  1. Create an object that will hold all form values and update them. After that you could simply access them with formValues.inputName.
  2. Store your default values in an array (in the same order as your inputs).
  3. Execute a function that will take care of outputting the default values & updating the object when the values are changed. It takes the form (selected by Id, Class, whatever) and an array of default values as parameters.
// create the object that will hold the input values
var formValues = {};
// store code in the function for a more 'modular' approach
function inputObj(formNR, defaultValues) { // where defaultValues is an array
  var inputs = formNR.getElementsByTagName('input');
  for ( var i = 0; i < inputs.length; i++) {
    if(inputs[i].type === 'text' || inputs[i].type === 'password') {
      formValues[inputs[i].name] = defaultValues[i]; // store default in object
    }
    inputs[i].value = defaultValues[i]; // output default in input
    inputs[i].addEventListener('keyup', function() { // update object on change
      formValues[this.name] = this.value;
    }, false);
  }
}
// build a little array with the defaultValues for each input
var defValues =['defaultFirstName','defaultLastName','defaultUser',
                 'defaultPass','defaultPass'];
// this will push all inputs from the given form in the formValues object.
inputObj(document.forms[0], defValues); 

// Access the values like this, eg.
console.log(formValues.firstname); // will return 'defaultFirstName'

See it in action here. Or with CodeView. Note: The code in the example has some additions to show the object's values on the page.

webketje
  • 10,376
  • 3
  • 25
  • 54
0

Try to first create a function that grabs the value from the input field:

<script>
    function XX()
    {
        var first2 = document.getElementById("firstname").value;
    } 
</script>

Then you have to fire it up when the input changes with onchange:

FirstName: <input type="text" id="firstname" name="firstname" onchange="XX()">
fog
  • 3,266
  • 1
  • 25
  • 31
malaquiastimoteo
  • 3
  • 1
  • 1
  • 3