Prevent duplicate values insert in HTML Table using JavaScript and jQuery in ASP.Net

Last Reply 5 days ago By pandeyism

Posted 5 days ago

how to prevent a duplicacy element in html table

i used this code it is working condition but data insert is duplicate

<div class="container-fluid" style="margin: 0px !important; padding: 0px !important;
    width: 100% !important">
    <div class="row" style="margin: 0px !important; padding: 0px !important; width: 100%!important">
        <div class="col-md-5" style="background-color: #e71880; margin: 0px !important; padding: 10px !important;
            width: 100%!important; height: 90vh">
            <asp:DropDownList ID="DDlOrg" runat="server" CssClass="form-control myddl">
            </asp:DropDownList>
            <asp:DropDownList ID="DDLCourseForOrg" runat="server" CssClass="form-control myddl">
            </asp:DropDownList>
            <asp:DropDownList ID="DDLSubjectForOrg" runat="server" CssClass="form-control myddl">
            </asp:DropDownList>
            <input id="btnAddRecord" type="button" value="+ADD" class="btncss2" style="border: 2px solid white"
                onclick="AddRecord();" />
        </div>
        <div class="col-md-7" style="margin: 0px !important; padding: 0px !important; width: 100%!important;">
            <div class="row">
                <div class="col-md-12 ">
                    <div class="rightdiv">
                        <table id="tblcoursesubject" class="tblfororg">
                            <tr>
                                <th>
                                    S.No
                                </th>
                                <th>
                                    COURSE
                                </th>
                                <th>
                                    SUBJECT
                                </th>
                                <th>
                                    CID
                                </th>
                                <th>
                                    SUBID
                                </th>
                                <th>
                                </th>
                                <th>
                                </th>
                            </tr>
                        </table>
                    </div>
                    <input id="Button1" type="button" value="Save" class="btncss" style="margin-right: 10px" />
                    <input id="Button2" type="button" value="Cancel" class="btncss" />
                </div>
            </div>
        </div>
    </div>
</div>

jquery code

function AddRecord() {
    var btn = $("#btnAddRecord").val();
    var DDlOrg = $("#DDlOrg").val();
    if (DDlOrg == "0") {
        swal({
            title: 'Warning',
            text: 'Select Organisation',
            type: 'warning',
            confirmButtonText: 'OK',
            confirmButtonColor: "#134d8a"
        });
        return false;
    }
    var DDLCourseForOrg = $("#DDLCourseForOrg").val();
    if (DDLCourseForOrg == "0") {
        swal({
            title: 'Warning',
            text: 'Select Course',
            type: 'warning',
            confirmButtonText: 'OK',
            confirmButtonColor: "#134d8a"
        });
        return false;
    }

    var DDLSubjectForOrg = $("#DDLSubjectForOrg").val();
    if (DDLSubjectForOrg == "0") {
        swal({
            title: 'Warning',
            text: 'Select Subject',
            type: 'warning',
            confirmButtonText: 'OK',
            confirmButtonColor: "#134d8a"
        });
        return false;
    }

    if (btn == "+ADD") {
        var table = document.getElementById("tblcoursesubject"),

            rowCount = table.rows.length,
            newrow = table.insertRow(table.length),
            cell1 = newrow.insertCell(0),
            cell2 = newrow.insertCell(1),
            cell3 = newrow.insertCell(2),
            cell4 = newrow.insertCell(3),
            cell5 = newrow.insertCell(4),
            cell6 = newrow.insertCell(5),
            cell7 = newrow.insertCell(6),

            course = $("[id*=DDLCourseForOrg]"),
            subjectname = $("[id*=DDLSubjectForOrg]");


        //get drop course vale and text
        var cname = course.find("option:selected").text();
        var cid = course.val();
        //get Subject course vale and text
        var subject = subjectname.find("option:selected").text();
        var subid = subjectname.val();

        cell1.innerHTML = '';
        cell2.innerHTML = cname;
        cell3.innerHTML = subject;
        cell4.innerHTML = cid;
        cell5.innerHTML = subid;
        cell6.innerHTML = ' <input id="imgBtnEdit" class="EdittbDetailsForChapterMaster" type="image" src="../images/edit.png" value="Update" title="Click For EditRecord" onclick="EditRecord(); return false;" />';
        cell7.innerHTML = '  <input id="imgBtnDelete" class="DelDetailsForChapterMaster" type="image" src="../images/del.png" value="Update" title="Click For Delete Record" onclick="DeleteRecord(); return false;" />';
    }
}

 

Posted 5 days ago Modified on 5 days ago

Hi SajidHussa,

I have created below sample by taking reference of below link.

Check for Duplicate values while inserting in GridView without SQL in ASP.Net

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function AddRecord() {
            var btn = $("#btnAddRecord").val();
            var DDlOrg = $("#DDlOrg").val();
            if (DDlOrg == "0") {
                return false;
            }
            var DDLCourseForOrg = $("#DDLCourseForOrg").val();
            if (DDLCourseForOrg == "0") {
                return false;
            }
            var DDLSubjectForOrg = $("#DDLSubjectForOrg").val();
            if (DDLSubjectForOrg == "0") {
                return false;
            }
            if (btn == "+ADD") {
                var table = document.getElementById("tblcoursesubject"),
                course = $("[id*=DDLCourseForOrg]"),
                subjectname = $("[id*=DDLSubjectForOrg]");
                var cname = course.find("option:selected").text();
                var cid = course.val();
                var subject = subjectname.find("option:selected").text();
                var subid = subjectname.val();

                var isExist = CheckDuplicates(cname, cid, subject, subid);
                if (isExist) {
                    var newrow = table.insertRow(table.length),
                    cell1 = newrow.insertCell(0),
                    cell2 = newrow.insertCell(1),
                    cell3 = newrow.insertCell(2),
                    cell4 = newrow.insertCell(3),
                    cell5 = newrow.insertCell(4)

                    cell1.innerHTML = '';
                    cell2.innerHTML = cname;
                    cell3.innerHTML = subject;
                    cell4.innerHTML = cid;
                    cell5.innerHTML = subid;
                }
            }
        }

        function CheckDuplicates(Cname, Cid, Subject, Subid) {
            var isValid = false;
            var grid = document.getElementById("tblcoursesubject");
            var rows = grid.getElementsByTagName("TR");
            if (rows.length == 1) {
                isValid = true;
                return isValid;
            } else {
                for (var i = 0; i < rows.length - 1; i++) {
                    var cells = rows[i].getElementsByTagName("TD");
                    var cName = cells[1].innerHTML;
                    var subject = cells[2].innerHTML;
                    var cId = cells[3].innerHTML;
                    var subjectId = cells[4].innerHTML;
                    if (Cname == cName && Cid == cId && Subject == subject && Subid == subjectId) {
                        return false;
                    } else {
                        isValid = true;
                    }
                }
            }
            return isValid;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="container-fluid" style="margin: 0px !important; padding: 0px !important;
        width: 100% !important">
        <div class="row" style="margin: 0px !important; padding: 0px !important; width: 100%!important">
            <div class="col-md-5" style="background-color: #e71880; margin: 0px !important; padding: 10px !important;
                width: 100%!important; height: 90vh">
                <asp:DropDownList ID="DDlOrg" runat="server" CssClass="form-control myddl">
                    <asp:ListItem Text="NIIT" />
                    <asp:ListItem Text="St.Angelo" />
                    <asp:ListItem Text="Apptech" />
                </asp:DropDownList>
                <asp:DropDownList ID="DDLCourseForOrg" runat="server" CssClass="form-control myddl">
                    <asp:ListItem Text=".Net" />
                    <asp:ListItem Text="Java" />
                    <asp:ListItem Text="Python" />
                </asp:DropDownList>
                <asp:DropDownList ID="DDLSubjectForOrg" runat="server" CssClass="form-control myddl">
                    <asp:ListItem Text="C#" />
                    <asp:ListItem Text="J2EE" />
                </asp:DropDownList>
                <input id="btnAddRecord" type="button" value="+ADD" class="btncss2" style="border: 2px solid white"
                    onclick="AddRecord();" />
            </div>
            <div class="col-md-7" style="margin: 0px !important; padding: 0px !important; width: 100%!important;">
                <div class="row">
                    <div class="col-md-12 ">
                        <div class="rightdiv">
                            <table id="tblcoursesubject" class="tblfororg">
                                <tr>
                                    <th>
                                        S.No
                                    </th>
                                    <th>
                                        COURSE
                                    </th>
                                    <th>
                                        SUBJECT
                                    </th>
                                    <th>
                                        CID
                                    </th>
                                    <th>
                                        SUBID
                                    </th>
                                    <th>
                                    </th>
                                    <th>
                                    </th>
                                </tr>
                            </table>
                        </div>
                        <input id="Button1" type="button" value="Save" class="btncss" style="margin-right: 10px" />
                        <input id="Button2" type="button" value="Cancel" class="btncss" />
                    </div>
                </div>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

Screenshot