(Redirected from Preventing duplicate rows in a tabular HTML form)
I am working on a bespoke issue-tracking system at the moment (not for code issue-tracking, in case anyone thinks we’re cloning Redmine; although there certainly are overlaps…) in which each issue has a list of personnel, each of whom have a role on the issue.
The UI looks something like the screenshot to the right (there is also a means of adding new rows to the table—that doesn’t change how this validation works, but it is why we’re using
In an HTML table full of form elements, where new rows can be added (dynamically), we want to prevent duplicate rows being selected.
After changing a value in any row, get a list of the values in that row and then go through all of the rows and see if those values are there. If we find more than one instance of them, tell the user and return the changed value to what it was before.
The final code is below (it was built using jQuery 1.6.1 and jQuery UI 1.8.5), and a demonstration is available elsewhere.