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

SajidHus...

SOLVED CLOSED ACTIVE ANSWERED
User: SajidHussa
Posted: on Oct 09, 2019 04:30 AM
Forum: ASP.Net Web Forms
Answer: 1
Views: 15570
Sample Code: Download

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;" />';
    }
}

pandeyis...

0 3

Reply
ANSWER
User: pandeyism
Replied: on Oct 09, 2019 07:17 AM
Modified: on Oct 09, 2019 07:17 AM
Report

Hi SajidHussa,

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

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

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

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

Company

Explore

Follow us

Contact Us