Prevent row adding in html table ,on Duplicate Barcode

Question

I am adding row into html table,

 <div class="row">
            <div style="display: inline-block;">
                <div>
                    @Html.LabelFor(model => model.Prdno, "Barcode", htmlAttributes: new { @class = "control-label col-md-4" })

                    @Html.EditorFor(model => model.Prdno, new { htmlAttributes = new { @class = "form-control col-md-10", @id = "Search_Prdno" } })
                    @Html.ValidationMessageFor(model => model.Prdno, "", new { @class = "text-danger" })
                </div>
            </div>

 function addrow() {
        $('#btnInsert').add(function () {
            var tbody = $('#DataInsert tbody');
            var tr = $('<tr></tr>');
            tr.append('<td>' + $('#Barcode_Bale').val() + '</td>');
            tr.append('<td>' + $('#Bale_Qty').val() + '</td>');
            tr.append('<td>' + $('#select2-3').text() + '</td>');
            tr.append('<td>' + $('#select2-3').val() + '</td>');

            tr.append('<td><input class="del" type="button" value="Delete" /></td>')
            // Checking Duplicate Barcode
            var items = ['<td>' + $('#Barcode_Bale').val() + '</td>'];
            var item = $('#Search_Prdno').val();

                if ($.inArray(item, items) != -1) // or if (items.indexOf(item) != -1)
                {
                    $('#spnMessage').html(item + ' found');
                }
                else {
                    $('#spnMessage').html(item + ' not found');
                }
        

            tbody.append(tr);


            //$("#Barcode_Bale").empty();
            //$("#select2-3").empty();


            $('#Search_Prdno').val(null);
            $('#Search_Prdno').focus();

        });

i want to prevent duplicate Barcode to add in HTML table.

I tried below ,but it is not working.

  // Checking Duplicate Barcode
            var items = ['<td>' + $('#Barcode_Bale').val() + '</td>'];
            var item = $('#Search_Prdno').val();

                if ($.inArray(item, items) != -1) // or if (items.indexOf(item) != -1)
                {
                    $('#spnMessage').html(item + ' found');
                }
                else {
                    $('#spnMessage').html(item + ' not found');
                }
        

Answer 1

Hi @akhter hussain,

You can use jquery selectors:

$('#DataInsert tr:contains("' + $("#Barcode_Bale").val() + '")').length

 $('#btnInsert').add(function () {
        if ($('#DataInsert tr:contains("' + $("#Barcode_Bale").val() + '")').length > 0) {
            alert("found duplicate values");
        }
        else {
            var tbody = $('#DataInsert tbody');
            var tr = $('<tr></tr>');
            tr.append('<td>' + $("##Barcode_Bale").val() + '</td>');
            tr.append('<td>' + $('#Bale_Qty').val() + '</td>');
            tr.append('<td>' + $('#select2-3').text() + '</td>');
            tr.append('<td>' + $('#select2-3').val() + '</td>');

            tr.append('<td><input class="del" type="button" value="Delete" /></td>')
            tbody.append(tr);
        }

Best regards,
Lan Huang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.