CODEWITHSUNDEEP
javascriptjqueryhtml
ThomasJH
ThomasJH

Reputation: 53

How to auto generate number in an input field?

I am creating a table with an auto numbering ID column. I want to be able to have my input text field to auto-generate an ID number(when the user starts typing into the name input field).

How do I auto-generate a number into an input field?

Upvotes: 2

Views: 4148

Answers (2)

trincot
trincot

Reputation: 350117

If you have an HTML table, then you could respond to all edits, listening to the input event, and decide whether to fill a unique number (or wipe it out).

Here is a generic function you could call which takes as argument the table element that should have this feature, and the number of the column that should get these ID values.

Example:

function autoId(table, colNo) {
    table.addEventListener("input", function(e) {
        const tr = e.target.closest("tr");
        const idInput = tr.cells[colNo].querySelector("input");
        for (const input of tr.querySelectorAll("input")) {
            hasData = input.value.trim() !== "" && input !== idInput;
            if (hasData) break;
        }
        if (hasData && idInput.value.trim() === "") {
            idInput.value = (Math.max(...Array.from(
                table.querySelectorAll("td:nth-child(" + (colNo+1) + ") input"), 
                input => +input.value
            ).filter(v => !isNaN(v))) || 0) + 1;
        } else if (!hasData && idInput.value.trim() !== "") {
            idInput.value = "";
        }
    });
}

const table = document.querySelector("table");

// Call the function passing it the table and the column that has the ID -- that's all
autoId(table, 0);

// Let's give user the possibility to add rows, using the first data row as template
document.querySelector("#btnAddRow").addEventListener("click", () => {
    table.insertAdjacentHTML("beforeend", table.rows[1].innerHTML);
});
<table>
<tr><th>ID</th><th>Name</th></tr>
<tr><td><input size="2"></td><td><input></td></tr>
</table>
<button id="btnAddRow">Add row</button>

Upvotes: 0

Aniket G
Aniket G

Reputation: 3512

You could use the code below. What it does is every time you click the insert button, it adds a number to the id of the item (the number next to the text field).

This code uses document.getElementById() to modify all of the elements, and uses a variable num to incremement the id value. The part where it adds the item to the list is optional - I just added it to make it look more realistic. 

var num = 1;
var input = document.getElementById('item');
var p = document.getElementById('number');
var list = document.getElementById('list');
var button = document.getElementById('insert');

button.addEventListener('click', function() {
  num++;
  p.innerHTML = num;
  list.innerHTML += "<li>" + input.value + "</li>";
});
#item {
  display: inline;
}

#number {
  display: inline;
  margin-right: 10px;
}
<p id='number'>1</p>
<input type='text' id='item' />
<button id='insert'>Insert</button>

<ul id='list'>
  
</ul>

Upvotes: 1

Related Questions