Tutorial :create unique id with javascript


I have a form where a user can add multiple select boxes for multiple cities. The problem is that each newly generated select box needs to have a unique id. Can this be done is JavaScript?

UPDATE: here is the part of the form for selecting cities. Also note that i'm using some php to fill in the cities when a specific state is selected.

<form id="form" name="form" method="post" action="citySelect.php">  <select id="state" name="state" onchange="getCity()">      <option></option>      <option value="1">cali</option>      <option value="2">arizona</option>      <option value="3">texas</option>  </select>  <select id="city" name="city" style="width:100px">    </select>        <br/>  </form>  

Here is the javascript:

$("#bt").click(function() {    $("#form").append(         "<select id='state' name='state' onchange='getCity()'>             <option></option>             <option value='1'>cali</option>             <option value='2'>arizona</option>             <option value='3'>texas</option>          </select>          <select id='city' name='city' style='width:100px'></select><br/>"       );  });  


could you not just keep a running index?

var _selectIndex = 0;    ...code...  var newSelectBox = document.createElement("select");  newSelectBox.setAttribute("id","select-"+_selectIndex++);  


Upon further consideration, you may actually prefer to use array-style names for your selects...


<select name="city[]"><option ..../></select>  <select name="city[]"><option ..../></select>  <select name="city[]"><option ..../></select>  

then, on the server side in php for example:

$cities = $_POST['city']; //array of option values from selects  

EDIT 2 In response to OP comment

Dynamically creating options using DOM methods can be done as follows:

var newSelectBox = document.createElement("select");  newSelectBox.setAttribute("id","select-"+_selectIndex++);    var city = null,city_opt=null;  for (var i=0, len=cities.length; i< len; i++) {      city = cities[i];      var city_opt = document.createElement("option");      city_opt.setAttribute("value",city);      city_opt.appendChild(document.createTextNode(city));      newSelectBox.appendChild(city_opt);  }  document.getElementById("example_element").appendChild(newSelectBox);  

assuming that the cities array already exists

Alternatively you could use the innerHTML method.....

var newSelectBox = document.createElement("select");  newSelectBox.setAttribute("id","select-"+_selectIndex++);  document.getElementById("example_element").appendChild(newSelectBox);    var city = null,htmlStr="";  for (var i=0, len=cities.length; i< len; i++) {      city = cities[i];      htmlStr += "<option value='" + city + "'>" + city + "</option>";  }  newSelectBox.innerHTML = htmlStr;  


another way it to use the millisecond timer:

var uniq = 'id' + (new Date()).getTime();  


var id = "id" + Math.random().toString(16).slice(2)  


function uniqueid(){      // always start with a letter (for DOM friendlyness)      var idstr=String.fromCharCode(Math.floor((Math.random()*25)+65));      do {                          // between numbers and characters (48 is 0 and 90 is Z (42-48 = 90)          var ascicode=Math.floor((Math.random()*42)+48);          if (ascicode<58 || ascicode>64){              // exclude all chars between : (58) and @ (64)              idstr+=String.fromCharCode(ascicode);              }                      } while (idstr.length<32);        return (idstr);  }  


Very short function will give you unique ID:

var uid = (function(){var id=0;return function(){if(arguments[0]===0)id=0;return id++;}})();  

alert ( uid() );


In reply to @scott : Sometime JS go very fast... so...

var uniqueId = null,      getUniqueName = function(prefix) {          if (!uniqueId) uniqueId = (new Date()).getTime();          return (prefix || 'id') + (uniqueId++);      };  


put in your namespace an instance similar to the following one

var myns = {/*.....*/};  myns.uid = new function () {      var u = 0;      this.toString = function () {          return 'myID_' + u++;      };  };  console.dir([myns.uid, myns.uid, myns.uid]);  


I'm working on a similar problem to the OP, and found that elements of the solutions from @Guy and @Scott can be combined to create a solution that's more solid IMO. The resulting unique id here has three sections separated by underscores:

  1. A leading letter;
  2. A timestamp displayed in base 36;
  3. And a final, random section.

This solution should work really well, even for very large sets:

function uniqueId () {      // desired length of Id      var idStrLen = 32;      // always start with a letter -- base 36 makes for a nice shortcut      var idStr = (Math.floor((Math.random() * 25)) + 10).toString(36) + "_";      // add a timestamp in milliseconds (base 36 again) as the base      idStr += (new Date()).getTime().toString(36) + "_";      // similar to above, complete the Id using random, alphanumeric characters      do {          idStr += (Math.floor((Math.random() * 35))).toString(36);      } while (idStr.length < idStrLen);        return (idStr);  }  


To avoid creating any counters and be sure that the id is unique even if there are some other components that create elements with ids on the page, you can use a random number and than correct it if it's not good enough (but you also have to set the id immediately to avoid conflicts):

var id = "item"+(new Date()).getMilliseconds()+Math.floor(Math.random()*1000);   // or use any random number generator   // whatever prefix can be used instead of "item"  while(document.getElementById(id))      id += 1;  //# set id right here so that no element can get that id between the check and setting it  


Like others said you can use a running index, or if you don't like the idea of using a variable just pull the id of the last city in the list and add 1 to its id.


Here is a function (function genID() below) that recursively checks the DOM for uniqueness based on whatever id prefex/ID you want.

In your case you'd might use it as such

var seedNum = 1;  newSelectBox.setAttribute("id",genID('state-',seedNum));    function genID(myKey, seedNum){       var key = myKey + seedNum;       if (document.getElementById(key) != null){           return genID(myKey, ++seedNum);       }       else{           return key;       }   }  


You could generate an ID using a timer and avoiding duplicates using performance.now():

id = 'id' + performance.now()  dup = 'id' + performance.now()    console.log(id)  console.log(id.replace('.','')) // sexy id  console.log(id === dup) // false!
.as-console-wrapper{border-top: none !important;overflow-y: auto !important;top: 0;}

Note that the High resolution time API is available in all recent browsers.


Warning: This answer may not be good for the general intent of this question, but I post it here nevertheless, because it solves a partial version of this issue.

You can use lodash's uniqueId (documentation here). This is not a good uniqueId generator for say, db records, or things that will persist a session in a browser or something like that. But the reason I came here looking for this was solved by using it. If you need a unique id for something transient enough, this will do.

I needed it because I was creating a reusable react component that features a label and a form control. The label needs to have a for="controlId" attribute, corresponding to the id="controlId" that the actual form control has (the input or select element). This id is not necessary out of this context, but I need to generate one id for both attributes to share, and make sure this id is unique in the context of the page being rendered. So lodash's function worked just fine. Just in case is useful for someone else.


const uid = function(){      return Date.now().toString(36) + Math.random().toString(36).substr(2);  }  

This Function generates very unique IDs that are sorted by its generated Date. Also useable for IDs in Databases.


Random is not unique. Times values are not unique. The concepts are quite different and the difference rears its ugly head when your application scales and is distributed. Many of the answers above are potentially dangerous.

A safer approach to the poster's question is UUIDs: Create GUID / UUID in JavaScript?


Here's my own take at it based on the xpath of the element created :

/** Returns the XPATH of an element **/  var getPathTo = function(element) {    if (element===document.body)        return element.tagName;      var ix= 0;    var siblings= element.parentNode.childNodes;    for (var i= 0; i<siblings.length; i++) {        var sibling= siblings[i];        if (sibling===element)            // stripped xpath (parent xpath + tagname + index)            return getPathTo(element.parentNode)+ element.tagName + ix+1;        if (sibling.nodeType===1 && sibling.tagName===element.tagName)            ix++;     }  }    /** hashcode function (credit http://stackoverflow.com/questions/7616461/generate-a-hash-from-string-in-javascript-jquery **/  var hashCode = function(str) {    var hash = 0, i, chr, len;    if (str.length === 0) return hash;    for (i = 0, len = str.length; i < len; i++) {      chr   = str.charCodeAt(i);      hash  = ((hash << 5) - hash) + chr;      hash |= 0; // Convert to 32bit integer   }  return hash;  };    /** Genaretes according to xpath + timestamp **/  var generateUID = function(ele)  {    return hashCode(getPathTo(ele)) + new Date().getTime();  }  

First the xpath of the element is fetched.

The hashcode of the xpath is then computed. We therefore have a unique id per xpath.

The problem here is that xpath are not necesseraly unique if unique elements are generated on the fly. Thus we add the timestamp at the end.

Maybe we could also garantee more unique elements by adding a final Math.Random().


You could take advantage of closure.

var i = 0;  function generateId() {      return i++;  }  

If you want to enclose it:

function generator() {    var i = 0;    return function() {      return i++;    };  }    var generateId = generator();  generateId(); //1  generateId(); //2  

generator could accept a default prefix; generateId coud accept an optional suffix:

function generator(prefix) {    var i = 0;    return function(suffix) {      return prefix + (i++) + (suffix || '');    };  }    var generateId = generator('_');  generateId('_'); //_1_  generateId('@'); //_2@  

This comes in handy if you want your id to indicate a sequence, very much like new Date().getTime(), but easier to read.


I use a function like the following:

function (baseId) {    return baseId + '-' + Math.random().toString(16).slice(2);  }  

In parameter baseId I indicate a prefix for the id to be easier to identify the elements.


Combining random & date in ms should do the trick with almost no change of collision :

function uniqid(){    return Math.random().toString(16).slice(2)+(new Date()).getTime()+Math.random().toString(16).slice(2);  }  alert(uniqid()+"\r"+uniqid());

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »