create unique id with javascript

Question

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    lt form id  form  name  form  method  post  action  citySelect php  gt   lt select id  state  name  state  onchange  getCity    gt       lt option gt  lt  option gt       lt option value  1  gt cali lt  option gt       lt option value  2  gt arizona lt  option gt       lt option value  3  gt texas lt  option gt   lt  select gt   lt select id  city  name  city  style  width 100px  gt    lt  select gt        lt br  gt   lt  form gt    Here is the javascript       bt   click function          form   append           lt select id  state  name  state  onchange  getCity    gt              lt option gt  lt  option gt              lt option value  1  gt cali lt  option gt              lt option value  2  gt arizona lt  option gt              lt option value  3  gt texas lt  option gt           lt  select gt           lt select id  city  name  city  style  width 100px  gt  lt  select gt  lt br  gt

User · Answer

Combining random  amp  date in ms should do the trick with almost no change of collision     x000D   x000D  function uniqid    x000D    return Math random   toString 16  slice 2   new Date    getTime   Math random   toString 16  slice 2   x000D    x000D  alert uniqid     r  uniqid     x000D   x000D   x000D

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Look at this tiny beauty  this will get ur job done  function  length        var id           do   id    Math random   toString 36  substr 2     while  id length  lt  length       return id substr 0  length

User · Answer

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 lt 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  amp  amp  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  lt  len  i          chr     str charCodeAt i       hash      hash  lt  lt  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

User · Answer

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

User · Answer

No external libraries needed  Uniqueness proved   You could do something like this    x000D   x000D     Function to generate unique id x000D   x000D  const uniqueId    length 16    gt    x000D    return parseInt Math ceil Math random     Date now    toPrecision length  toString   replace           x000D    x000D   x000D     ---------------------------- x000D   x000D  document querySelector   butt01   onclick        gt    x000D    document querySelector   span01   innerHTML   uniqueId   x000D    x000D   x000D  ids      x000D  count   0 x000D  document querySelector   butt02   onclick        gt    x000D    for  let i   0  i lt  1000  i     x000D      ids push uniqueId    x000D      x000D    for  el of ids   x000D      for  ell of ids   x000D        if el    ell  amp  amp  ids indexOf el     ids indexOf ell    x000D          count    1 x000D          x000D        x000D      x000D    document querySelector   span02   innerHTML    Found   count  duplicated random values   x000D    x000D   lt button id  butt01  gt Generate lt  button gt  x000D   lt br gt  x000D   lt span id  span01  gt  lt  span gt  x000D   lt br gt  x000D   lt hr gt  x000D   lt br gt  x000D   lt button id  butt02  gt Check collision potentiality in 1000 cases lt  button gt  x000D   lt br gt  x000D   lt span id  span02  gt  lt  span gt  x000D   x000D   x000D    Multiply time in milliseconds since epoch with a random value to fixed size   Run this to see possible collisions   You would see there are no collisions whether it is 1000  10000 or 1000000000   It would have a very small chance if two users generate ids at the same time and gets the rame random number   To increase the uniqueness you could multiply date more Math random  s

User · Answer

const generateUniqueId        gt   id     Date now     String Math random    substr 2           if u want to check for collision     const arr           const checkForCollision        gt          for  let i   0  i  lt  10000  i              const el   generateUniqueId            if  arr indexOf el   gt  -1              alert  COLLISION FOUND                      arr push el

User · Answer

another way it to use the millisecond timer   var uniq    id     new Date    getTime

User · Answer

Simple Solution    const ID     length 13    gt         Math random to base 36  numbers  letters        grab the first 9 characters      after the decimal    return       Math random   toString 36  substr 2   length      max  length should be less then 13    console log  quot Example ID     quot   ID

User · Answer

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    A leading letter  A timestamp displayed in base 36  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  lt  idStrLen        return  idStr

User · Answer

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

User · Answer

function generateId             return Math random   toString 36  substring 2     new Date    getTime   toString 36                   console log generateId

User · Answer

For generate unique id s  const uid        gt    String      Date now   toString 32          Math random   toString 32          Math random   toString 32      replace     g       For check that is works  var size   500000 var arr   new Array size     fill 0     map      gt  uid     var b   new Set arr   console log    size     b size    all ids are unique     not unique records   size - b size

User · Answer

There are two packages available for this   For short unique id generation nanoid link  import   nanoid   from  nanoid  const id   nanoid          quot Uakgb J5m9g-0JDMbcJqLJ quot  const id   nanoid 10       quot jcNqc0UAWK quot    For universally unique id generation uuid link  import   v4 as uuidv4   from  uuid   const id  uuidv4          quite big id

User · Answer

var id    id    Math random   toString 16  slice 2

User · Answer

You could generate an ID using a timer and avoiding duplicates using performance now      x000D   x000D  id    id    performance now   x000D  dup    id    performance now   x000D   x000D  console log id  x000D  console log id replace             sexy id x000D  console log id     dup     false  x000D   as-console-wrapper border-top  none  important overflow-y  auto  important top  0   x000D   x000D   x000D    Note that the High resolution time API is available in all recent browsers

User · Answer

let transactionId    new Date   getDate     new Date   getHours     new Date   getSeconds     new Date   getMilliseconds     x000D   x000D  let transactionId     new Date   getDate     new Date   getHours     new Date   getSeconds     new Date   getMilliseconds       console log transactionId  x000D   x000D   x000D

User · Answer

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

User · Answer

I think if you really want to have a unique ID then the best approach is to use a library like  uuid or uniqueid  Note  Unique ID is not the same as Random ID   To use only date time milliseconds approach is wrong  Nowadays computers are fast enough and able to run more than one iteration of a loop in a single millisecond   npm install uuid   Importing the library   If you are using ES modules  import   v4 as uuidv4   from  uuid     And for CommonJS   const   v4  uuidv4     require  uuid      Usage   uuidv4        This will output something like  9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d

User · Answer

could you not just keep a running index   var  selectIndex   0      code    var newSelectBox   document createElement  select    newSelectBox setAttribute  id   select-   selectIndex       EDIT  Upon further consideration  you may actually prefer to use array-style names for your selects     e g    lt select name  city    gt  lt option       gt  lt  select gt   lt select name  city    gt  lt option       gt  lt  select gt   lt select name  city    gt  lt option       gt  lt  select gt    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 lt  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 lt  len  i          city   cities i       htmlStr      lt option value      city      gt     city     lt  option gt      newSelectBox innerHTML   htmlStr

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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 lt 58    ascicode gt 64                  exclude all chars between    58  and    64              idstr  String fromCharCode ascicode                                       while  idstr length lt 32        return  idstr

[javascript] create unique id with javascript

Examples related to javascript

Examples related to html

Examples related to select

Examples related to dynamic