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
– yardie, Commented Feb 10, 2016 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
– Harry, Commented Feb 10, 2016 at 13:16
@SoumyaRao: If for whatever reason you want to do it at client side, then JS loops is the answer :) — Harry
– Harry, Commented Feb 10, 2016 at 13:29
@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. Is that it? — Harry
– Harry, Commented Feb 10, 2016 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
– SR1092, Commented Feb 10, 2016 at 14:12

Community · Accepted Answer · 2017-05-23 12:07:47Z

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.

Brodie · Accepted Answer · 2016-02-10 14:36:06Z

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.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related