Geek Answers Handbook

Rotate HTML form tab to JavaScript variable

I'm new to HTML forms, and I was wondering how I can (or not) change its 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 (ex First Name, Last Name, New Username, etc.) to be its own JavaScript variable. Thank you very much!

+7
javascript variables html forms
source share
3 answers

Accessing HTML Input Elements from JavaScript

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

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

Now you have the value from the firstname field in the JavaScript variable named firstName. Just keep repeating and you have received other input fields. Then you can continue and bind these operators to the function and call it when the input changes. For example:

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

Now register this function call for keyup changes / events, and you have a function that tracks the change of form values:

 <input type="text" name="firstname" onkeyup="formChanged()" onchange="formChanged()"/>
+4
source share

If you prefer a more structured approach or if there are several forms on the page, you can:

  • Create an object that will store all the values ​​of the forms and update them. After that, you can simply access them using formValues.inputName .
  • Store the default values ​​in an array (in the same order as your inputs).
  • Execute a function that will ensure that default values ​​are output and the object is updated when values ​​change. 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 in action here . Or with CodeView . Note. The code in the example contains some additions for displaying the values ​​of objects on the page.

+2
source share

Try first creating a function that captures the value from the input field:

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

Then you need to run it when the input is changed using onchange :

 First Name: <input type="text" id="firstname" name="firstname" onchange="XX()">
0
source share

More articles:


All Articles