Jquery update array with form input text by click update button

Question

I have a form. When I click the Submit button I create an object with form elements. And then I push these objects to an array. After I am creating a html table with this array.

I have an update button as you can see. When I click the button, table TDs turning input and I can change the text. What I need to do is when I click the update button second time, that array must be updated. How Can I do it?

main.js:

var obj = { };
var data, i;
var personArray = [];
var pageNum = 1;
var objPerPage = 5;

$("#submitButton").click(function () {
    addObject();
    showTable(pageNum);
    pagination(pageNum);
    resetForm('');
});

function addObject() {
    var obj = { };
    data = $('#personForm').serializeArray();
    for (i = 0; i < data.length; i++) {
        obj[data[i].name] = data[i].value;
    }

    personArray.push(obj);
}

function pagination(p) {
    var personArrayLen = personArray.length;
    var pageNumFin = Math.ceil(personArrayLen / objPerPage);
    if (pageNumFin > 1) {
        $(".paging").remove();
        for (t = pageNumFin; t > 0; t--) {
            $('<button type="button" id="pageId-' + t + '" class="paging">' + t + '</button>').insertAfter('#table');
        }

        $('.paging').click(function () {
            var id = $(this).attr('id');
            var ind = id.split('-');
            var pageNum = ind[1];
            showTable(pageNum);
        });
    }
}

function showTable(page) {
    var index = personArray.length;
    var start = (page - 1) * objPerPage;
    var finish = start + objPerPage;
    if (finish > index) {
        finish = index;
    } else {
        finish = start + objPerPage;
    }

    $('.personRow').remove();
    for (k = finish; k >= start; k--) {
        $("table#personTable tbody").append('<tr class="personRow"><td>' + personArray[k].firstname + '</td><td>' + personArray[k].lastname + '</td><td>' + personArray[k].tc + '</td><td>' + personArray[k].birthday + '</td><td><button class="deleteButton" id="deleteRow-' + k + '">Delete</button></td><td><button class="updateButton" id="updateRow-' + k + '">Update</button></td></tr>');
    }

    $(".deleteButton").click(function () {
        var id = $(this).attr('id');
        var ind = id.split('-');
        var deleteIndex = ind[1];
        deleteFunction(deleteIndex);
    });

    $(".updateButton").click(function () {

        var id = $(this).attr('id');
        var ind = id.split('-');
        var updateIndex = ind[1];
        console.log(updateIndex);
        $(this).parent().siblings().slice(0, 4).each(
            function () {
                if ($(this).find('input').length) {
                    $(this).text($(this).find('input').val());
                } else {
                    var inputText = $(this).text();
                    $(this).text('').append($('<input />', { 'value': inputText }).val(inputText));
                    console.log(personArray[updateIndex].name);
                    personArray[updateIndex].name = inputText;
                }
            });
    });
}

function resetForm(value) {
    $("#firstname").val(value);
    $("#lastname").val(value);
    $("#tc").val(value);
    $("#birthday").val(value);
}

/*Seçili öğeyi silip tabloyu gösterme fonksiyonunu çağırır*/
function deleteFunction(delInd) {
    if (delInd > -1) {
        personArray.splice(delInd, 1);
    }
    showTable(pageNum);    
    pagination(pageNum);    
}

function updateFunction() {
    $(this).parent().siblings().css('background-color', 'red');
    $(this).parent().siblings().each(
        function () {
            if ($(this).find('input').length) {
                $(this).text($(this).find('input').val());
            } else {
                var t = $(this).text();
                $(this).text('').append($('<input />', { 'value': t }).val(t));
            }
        });
}

index.html:

<!DOCTYPE html>

<html>
    <head>
        <title>Person Record</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="shortcut icon" href="">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    </head>
    <body>
        <form id="personForm">
            <div>
                <label for="firstname">Name:</label>
                <input type="text" id="firstname" name="firstname" value="" placeholder="İsim"/>
            </div>
            <div>
                <label for="lastname">Surname:</label>
                <input type="text" id="lastname" name="lastname" value="" placeholder="Soyisim"/>
            </div>
            <div>
                <label for="tc">TC:</label>
                <input type="tel" id="tc" name="tc" value="" placeholder="TC"/>
            </div>
            <div>
                <label for="birthday">Birthday:</label>
                <input type="date" id="birthday" name="birthday" />
            </div>
            <div>
                <input type="button" value="Save" id="submitButton" />
            </div>
        </form>

        <div id="table">
            <h3>Tüm Kişiler</h3>
            <table id="personTable" border="1">
                <thead>
                    <tr>
                        <th> Name </th>
                        <th> Surname </th>
                        <th> TC </th>
                        <th> Birthday </th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>           
        </div>

        <script type="text/javascript" src="main.js"></script>
    </body>
</html>

Rodion Golovushkin · Accepted Answer · 2017-02-21 09:53:35Z

I've found issue in your code. You forgot to subtract 1 from length of array. Pay attention for the cycle in function showTable.

Working code:

var obj = { };
var data, i;
var personArray = [];
var pageNum = 1;
var objPerPage = 5;

$("#submitButton").click(function () {
    addObject();
    showTable(pageNum);
    pagination(pageNum);
    resetForm('');
});

function addObject() {
    var obj = { };
    data = $('#personForm').serializeArray();
    for (i = 0; i < data.length; i++) {
        obj[data[i].name] = data[i].value;
    }

    personArray.push(obj);
}

function pagination(p) {
    var personArrayLen = personArray.length;
    var pageNumFin = Math.ceil(personArrayLen / objPerPage);
    if (pageNumFin > 1) {
        $(".paging").remove();
        for (t = pageNumFin; t > 0; t--) {
            $('<button type="button" id="pageId-' + t + '" class="paging">' + t + '</button>').insertAfter('#table');
        }

        $('.paging').click(function () {
            var id = $(this).attr('id');
            var ind = id.split('-');
            var pageNum = ind[1];
            showTable(pageNum);
        });
    }
}

function showTable(page) {
    var index = personArray.length;
    var start = (page - 1) * objPerPage;
    var finish = start + objPerPage;
    if (finish > index) {
        finish = index;
    } else {
        finish = start + objPerPage;
    }

    $('.personRow').remove();
    for (k = finish - 1; k >= start; k--) {
        $("table#personTable tbody").append('<tr class="personRow"><td>' + personArray[k].firstname + '</td><td>' + personArray[k].lastname + '</td><td>' + personArray[k].tc + '</td><td>' + personArray[k].birthday + '</td><td><button class="deleteButton" id="deleteRow-' + k + '">Delete</button></td><td><button class="updateButton" id="updateRow-' + k + '">Update</button></td></tr>');
    }

    $(".deleteButton").click(function () {
        var id = $(this).attr('id');
        var ind = id.split('-');
        var deleteIndex = ind[1];
        deleteFunction(deleteIndex);
    });

    $(".updateButton").click(function () {

        var id = $(this).attr('id');
        var ind = id.split('-');
        var updateIndex = ind[1];
        console.log(updateIndex);
        $(this).parent().siblings().slice(0, 4).each(
            function () {
                if ($(this).find('input').length) {
                    $(this).html($(this).find('input').val());
                } else {
                    var inputText = $(this).text();
                    $(this).text('').append($('<input />', { 'value': inputText }).val(inputText));
                    console.log(personArray[updateIndex].name);
                    personArray[updateIndex].name = inputText;
                }
            });
    });
}

function resetForm(value) {
    $("#firstname").val(value);
    $("#lastname").val(value);
    $("#tc").val(value);
    $("#birthday").val(value);
}

/*Seçili öğeyi silip tabloyu gösterme fonksiyonunu çağırır*/
function deleteFunction(delInd) {
    if (delInd > -1) {
        personArray.splice(delInd, 1);
    }
    showTable(pageNum);    
    pagination(pageNum);    
}

function updateFunction() {
    $(this).parent().siblings().css('background-color', 'red');
    $(this).parent().siblings().each(
        function () {
            if ($(this).find('input').length) {
                $(this).text($(this).find('input').val());
            } else {
                var t = $(this).text();
                $(this).text('').append($('<input />', { 'value': t }).val(t));
            }
        });
}

fiddle

PS It looks like you need some framework.

when you sort a,b,c,d,e,f and delete e, it shows f top of table
@Furkan it's another problem of your code. There are a lot of other bugs. For example, with pagination. I recommend you to make some refactoring. It will help you find and fix a lot of issues.

Collectives™ on Stack Overflow

Jquery update array with form input text by click update button

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related