Avoid duplicate at jquery append

Question

I am appending the data into a table using this script:

<script>
    count4 = 1;
    function appendcertificate(){
        var certification = $('#certification').val();
        var sectorSkills = $('#sektorSkills').val();
        var issuedate = $('#issuedate').val();
        var expireddate = $('#expireddate').val();

        var field = "<tr><td>"+certification+"</td><td>"+sektorSkills+"</td><td>"+issuedate+"</td><td>"+expireddate+"</td><input type='hidden' name='certificationVal[]' value='"+certification+"'><input type='hidden' name='skillsectorVal[]' value='"+skillsector+"'><input type='hidden' name='issuedateVal[]' value='"+issuedate+"'><input type='hidden' name='expireddateVal[]' value='"+expiredate+"'></tr>";
        $("#sertifikasiData tbody").append(field);
        count++;
    };

    function hapusform4(){
        $("#sertifikasiData tbody").html("");
    };
</script>

It uses onclick="appendcertificate()" trigger when you click the add button. What script should I put to prevent duplicate values in row, also if blank, could it alert like 'please fill minimum 1 row'.

score 0 · Answer 1 · answered Feb 28 '14 at 04:07

I have not tested it but this might work.

<script>
count4 = 1;
function appendcertificate(){
    var certification = $('#certification').val();
    var sectorSkills = $('#sektorSkills').val();
    var issuedate = $('#issuedate').val();
    var expireddate = $('#expireddate').val();

    if(cerfication == "" || sectorSkills == "" || issuedate == "" || expiredate == "") {
         alert("please fill minimum 1 row");
         return false;
     }
     for (var i = 0, row; row = document.getElementById("#sertifikasiData").rows[i]; i++) {
        var fields = new Array();
        for (var j = 0, col; col = row.cells[j]; j++) {
            fields[j] = col.innerHTML;
        }
        if(certification == fields[0] && sectorSkills == fields[1] && issuedate == fields[2] && expireddate == fields[3]) {
            alert("Duplicate row");
            return false;
            }
     }
    var field = "<tr><td>"+certification+"</td><td>"+sektorSkills+"</td><td>"+issuedate+"</td><td>"+expireddate+"</td><input type='hidden' name='certificationVal[]' value='"+certification+"'><input type='hidden' name='skillsectorVal[]' value='"+skillsector+"'><input type='hidden' name='issuedateVal[]' value='"+issuedate+"'><input type='hidden' name='expireddateVal[]' value='"+expiredate+"'></tr>";
    $("#sertifikasiData tbody").append(field);
    count++;
};

function hapusform4(){
    $("#sertifikasiData tbody").html("");
};

Hello, it work at blank field check only, and then can't append it into row — user3279136, Feb 28 '14 at 06:04

score 0 · Answer 2 · edited May 23 '17 at 12:03

If you don't want them to add a new blank row when there still is a blank row then when you add a row set a value like blankRow = true Then add an onchange event to all the new controls and that sets blankRow=false have the button not work when blankRow.
OR You can replace the simple boolean with a function that checks for the existence of blank rows (so if they erase it back to blank you can still see it). Then you don't really need the change handler.

Regarding duplicates this is a duplicate and you can find details here:

find duplicated rows in a table

Avoid duplicate at jquery append

2 Answers2