Is it possible to have a text box with CSS Counter increment value?

Question

I have created a dynamic table, with PHP and jQuery and am using CSS for creating auto increment Serial Number.

Requirement:

At the moment, the column in which the serial numbers are auto generated are blank. Is it possible to add a text box in which the serial numbers are generated so that the values can be retrieved while being saved?

That is, instead of having :

content: counter(serial-number);

we have something like this :

content: counter(text);

Or is there any possible way to save the serial numbers in a text box to be saved in the database.

Any suggestions will be appreciated.

You could use jQuery to grab the text from that tag and put it in a hidden input box — yardie, Feb 10 '16 at 13:16
As far as I am aware, CSS counter values cannot be accessed outside of CSS and so what you are trying to do would be impossible(?). — Harry, Feb 10 '16 at 13:16
Thanks @Harry! @andre3wap, how could I do it through JQuery? — SR1092, Feb 10 '16 at 13:17
How can you create unique serial numbers without checking with server? Seems completely backwards that css has anything to do with creating these numbers — charlietfl, Feb 10 '16 at 13:22
@SoumyaRao No, not even with jQuery. It is just impossible. Check this - http://stackoverflow.com/questions/2651739/how-to-access-css-generated-content-with-javascript — Harry, Feb 10 '16 at 13:22
@charlietfl I am open to learn any other way you can create serial numbers and save in the database. If you do have any suggestions do post it :) — SR1092, Feb 10 '16 at 13:28
@SoumyaRao: If for whatever reason you want to do it at client side, then JS loops is the answer :) — Harry, Feb 10 '16 at 13:29
@Harry Could you please post an example? I'm not too sure on how to do it with a dynamic table. Thanks! — SR1092, Feb 10 '16 at 13:36
@SoumyaRao: Is [this](https://jsfiddle.net/84pebLet/1/) what you need? — Harry, Feb 10 '16 at 13:59
@Harry I want the serial number value to be stored in a textbox, so that I can call it using $_POST[''] once the page is submitted.. — SR1092, Feb 10 '16 at 14:03
@SoumyaRao: That should be pretty easy, isn't it? You just need to set the value to an input box instead of the `td` itself like [here](https://jsfiddle.net/84pebLet/2/). Is that it? — Harry, Feb 10 '16 at 14:09
@Harry That totally solved my issue! Could you post that link as an answer? Might be helpful to someone in future :) Thanks a ton! :) — SR1092, Feb 10 '16 at 14:12
the only thing I would add to @Harry answer is you could keep your UI the same and then put the serial into a hidden input, this way the user can't change the serial number (easily anyway). Unless that isn't a concern :) — Brodie, Feb 10 '16 at 14:25
@Brodie: That is true too but even with a hidden input a knowledgeable user can tamper with the data. (By the way **note to future visitors**, the Fiddles I linked in comments above are not working. I don't know why). — Harry, Feb 10 '16 at 14:26
completely agree about that, just not as easily :P I would assume the company itself is using this form as an internal tool because it's generating product numbers -- the best solution would be to do roundtrip to server and let the server create the serials and use them as IDs or something during the post. — Brodie, Feb 10 '16 at 14:37

score 1 · Accepted Answer · edited May 23 '17 at 12:07

No, the CSS counter values cannot be accessed outside of CSS. So, there is no way to assign this to a input box or access the value using JS/jQuery etc. More details can be found in the answer here and so I am not going to repeat it.

Like charlietfl had mentioned in his comment, I would ideally recommend checking with the server and then setting the value (using AJAX) or completely do the serial number generation at the backend and just display placeholder values (like 1, 2, 3 etc) in the page. I say this because (a) uniqueness cannot be fully attained if they are generated at client-side and (b) values could easily be tampered if they are generated at client-side and stored as-is into the DB. Either way, it would also be better to validate the incoming data before storing to DB.

But, if for whatever reason you wish to proceed doing this at client side, then you could write a simple function jQuery's index() feature and set the index of the tr to the input box. I am not an expert in jQuery and so there are chances that this could be achieved in a simpler way.

function numberRows(){
  $("#tb2 tr").each(function(){
    $(this).find("td:first-child input").val($("#tb2 tr").index(this));
  });    
}

Fiddle Demo

As Brodie had indicated in comments, you may want to change the input from readonly to a hidden input but I'd leave that to you. I used a readonly box just to visibly show the value.

score 0 · Answer 2 · answered Feb 10 '16 at 14:36

I really like @harry answer if you want to go w/ a clientside solution.

Looking at what you had in your fiddle, if you were to do something like create a hidden input in the first column and set it to a default of 1 (or whatever comes back from the server) you could allow it to increment like this, where on load you pull the serial of the first row and then as the user adds rows, the serial in incremented. This also puts the input into a hidden field so it's not as easily accessible to change from the user perspective (assuming you don't want them to manually change the sn's). Ideally, you would also control the display serial number from this rather than from the CSS.

  var serial = $('input[name="serialNumber"]').eq(0).val();
  $(function(){
        $('#addMore2').on('click', function() {
                var data = $("#tb2 tr:eq(1)").clone(true).appendTo("#tb2");
                data.find("input").val('');
                data.find('input[name="serialNumber"]').val(++serial);
        });
        $(document).on('click', '.remove', function() {
            var trIndex = $(this).closest("tr").index();
                if(trIndex>1) {
                $(this).closest("tr").remove();
            } else {

            }
        });
    });

It'd be better to put it into a function or even (as suggested by other users) do a small roundtrip to the server and let the server create the row in your database and return you a serial number. Then when you post you have a serial number that you can use to identify the row to update.

Is it possible to have a text box with CSS Counter increment value?

2 Answers2