How do I get the id of a element in a form?

Question

I need to get the id of an element within a form so I can tag the element as "false" or "true". Or, alternately, I need a way to associate a name with an element that can I pull in javascipt so I can change the associated value.

var form = document.getElementById("myForm");
form.elements[i].value

Those lines of code is what I tried but it doesn't seem to work.

Edit:

function initial(){
        if (localStorage.getItem("run") === null) {
                var form = document.getElementById("myForm").elements;

                for(var i = 0; i < 1 ; i++){
                    var id = form.elements[i].id;
                    sessionStorage.setItem(id,"false");
                }
            localStorage.setItem("run", true);
        }
    }

So basically when I run the page, I want a localStorage item attached to all the buttons on the screen. I want this to run once so I can set all the items to false. Problem is I don't know how to get the ids so I have a value to attach to the button. Any idea of how to accomplish a task like this.

Edit2:

function initial(){
        if (localStorage.getItem("run") === null) {
                var form = document.getElementById("myForm");
                var tot = document.getElementById("myForm").length;

                for(var i = 0; i < tot ; i++){
                    sessionStorage.setItem(form.elements[i].id,"false");
                }
            localStorage.setItem("run", true);
        }
    }

This is the new code. It mostly seems to work but for some reason only the first value is getting set to false. Or maybe it has to do with this function, I'm not sure.

 function loader(){
        var form = document.getElementById("myForm");
        var tot = 5;

        for(var i = 0; i < 5 ; i++){
            if(sessionStorage.getItem(form.elements[i].id) === "true"){
                document.getElementById(form.elements[i].id).style.backgroundColor = "green";
                return ;
            }else{
                document.getElementById(form.elements[i].id).style.backgroundColor = "red";
                return false;
            }
        }
    }

Anyways, I'm running both of these at the same time when the page is executed so they are all set to false and turn red. But when a button is properly completed, the color of the button turns green.

Answer 1

It's available via the id property on the element:

var id = form.elements[i].id;

More on MDN and in the spec .

Live Example:

 var form = document.getElementById("myForm"); console.log("The id is: " + form.elements[0].id); 

 <form id="myForm"> <input type="text" id="theText"> </form> 

Answer 2

You're already storing all the elements in the form so it must be :

var form = document.getElementById("myForm").elements;
var id = form[i].id;

Or remove the elements part from the form variable like :

var form = document.getElementById("myForm");
var id = form.elements[i].id;