Turn HTML Form Input into JavaScript Variable

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.

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()"/>