How to do auto increment with a specific format using jQuery or JavaScript?

Question

Is there any way to increment a value using jQuery? I want to have the values in this format. ABC-000001, ABC-000002,... ABC-100000 etc.

How about you split it into two - the `ABC-` part and then the numeric part - manipulate the numeric as appropriate, then output it padding it with zeores? — VLAZ, Jun 26 '14 at 08:18

score 3 · Answer 1 · answered Jun 26 '14 at 08:24

3

See http://jsfiddle.net/Juw6h/

var a =0
for(var i=0;i<1000;i++)
{
    $("#test").append(" ABC-"+pad(i,4))
}


function pad(n, width, z) {
  z = z || '0';
  n = n + '';
  return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;

answered Jun 26 '14 at 08:24

Dev

6,628
2
25
34

It would be better if you put the append after the for loop, concatenate the string in the for loop and afterwards add it to the append, so you dont call append 1000 times. – Jonathan Römer Jun 26 '14 at 09:08

Billy Blaze · Answer 2 · 2014-06-26T09:06:42.160

1

See: http://jsfiddle.net/np7Yv/

$("#add").click(function() {
   var cur = parseInt($("#incremental").data('value')),
       prefix = $("#incremental").data('prefix'),
       padded;

   cur++;

   padded = ('000'+cur).slice(-4); // Prefix three zeros, and get the last 4 chars
   $("#incremental").val(prefix + padded);
   $("#incremental").data('value', cur);
});

EDIT

For saving the id's with a cookie see: http://jsfiddle.net/ueZh3/

edited Jun 26 '14 at 09:06

answered Jun 26 '14 at 08:28

Billy Blaze

333
1
8

Thanks a lot Billy, this is exactly what I was looking for. need to have some modification, suppose i clicked the button 10 times, 10 ids are generated now..when i will open this form next time then the increment should be from 11. is it possible? – Mahee Jun 26 '14 at 08:41
Your welcome, currently it doesn't remember your last id. You need to save the current id to a cookie or either to localstorage so that the next time you open this page it will know the last id. I'll get a example for you up in a bit. – Billy Blaze Jun 26 '14 at 08:47
*Update new url* http://jsfiddle.net/ueZh3/ for an example with the ability to save the id to a cookie. – Billy Blaze Jun 26 '14 at 09:07
Thanks Billy, yes its working, But one more problem might come. As am looking in to code, seems you are storing it into local cookies, my requirement is anyone can hit your html from anywhere, then this should retain the increment as what exactly its working now. Is it possible? I mean when you tested it three time from there and count become three, now am hitting the same html now its should show me next count that is 4. – Mahee Jun 26 '14 at 10:11
Ahh, I didn't get that requirement. In that case it's going to be very difficult to do this with JS and HTML only. You need to include a PHP script that keeps track of the current id in a DB or file, when somebody increment it you need to use an AJAX request to get the new incremented id that PHP generated and stored. – Billy Blaze Jun 26 '14 at 10:29
Sorry for a small question, Same code am copying at my local system. hitting add increment does nothing, why? I imported jquery.js in my html file and tried to put alert on start of the function but its not working. Any help! – Mahee Jun 26 '14 at 15:48

Mohammad Kermani · Answer 3 · 2014-06-26T08:54:31.447

1

This is my answer, please test it, this way is too fast

value="ABC-100002";
i=0;
$("#incrase").click(function(){
 var newValue=value.split('-');
    var increase=newValue[1];
    increase++;
    value="ABC-"+increase;
    alert(increase)

})

DEMO

edited Jun 26 '14 at 08:54

answered Jun 26 '14 at 08:33

Mohammad Kermani

5,188
7
37
61

Ja͢ck · Answer 4 · 2014-06-26T09:42:33.267

You can create a generator like construction:

function AutoIncrement(prefix, start)
{
    var index = +start || 1; // start is 1 by default

    // see also: http://stackoverflow.com/a/2998822/1338292
    function pad(num, size) 
    {
        var s = "00000" + num;
        return s.slice(-size);
    }

    return function() {
        return prefix + pad(index++, 6);
    };
}

To use it:

var nextId = AutoIncrement('ABC-');

console.log(nextId()); // "ABC-000001"
console.log(nextId()); // "ABC-000002"

To start from any number:

var nextId = AutoIncrement('ABC-', 15);
console.log(nextId()); // "ABC-000015"

Demo

+1 for the neat code. OP could use this together with my example. — Billy Blaze, Jun 26 '14 at 09:11

score 0 · Answer 5 · answered Jun 26 '14 at 15:57

Here is my local html file

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0-beta2.js"></script>
<script type="text/javascript">
var incremental = $("#incremental");

$("#add").click(function(e, reload) {
   var cur = utils.getCookie("lastId") || parseInt(incremental.data('value')),
       prefix = incremental.data('prefix'),
       padded;

    if(reload !== true) {
        cur++;
    }

    padded = ('000'+cur).slice(-4); // Prefix three zeros, and get the last 4 chars
    incremental.val(prefix + padded).data('value', cur);
    utils.setCookie("lastId", cur, 10);//name, value, days to rememer
});

var utils = {
    setCookie: function(cname, cvalue, exdays) {
        var d = new Date();
        d.setTime(d.getTime()+(exdays*24*60*60*1000));
        var expires = "expires="+d.toGMTString();
        document.cookie = cname + "=" + cvalue + "; " + expires + "; path=/; domain=." + location.host;
    },

    getCookie: function(cname) {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for(var i=0; i<ca.length; i++)  {
            var c = ca[i].trim();

            if (c.indexOf(name)==0)
                return c.substring(name.length,c.length);
        }
        return null;
    }
};

$("#add").trigger("click", [true]);
</script>
</head>
<body>

<input value="ABC-0000" data-value="0" data-prefix="ABC-" id="incremental">
<a href="#" id="add">Add incremental</a>
</body>
</html>

You're loading the javascript code before the rest of the document is generated. HTML is kinda dumb and executes your code before the actual document is generated. To avoid this you can add `$(document).ready(function() {` before and `});` after you code. Like so: http://jsfiddle.net/c2FLG/ — Billy Blaze, Jun 26 '14 at 18:19

How to do auto increment with a specific format using jQuery or JavaScript?

5 Answers5