Fill form using table data

Question

So I have a form through which I add entries to my database, I am trying to use the same form to update/edit existing records in the database.

My page consists of a form to add data and a table which shows existing data. the existing data table has a column edit against each entry, the table is filled dynamically using php.

This is what I am trying to to, when the user clicks on edit button against any row, the data in that row should be filled up into the form automatically.

I made a jsfiddle here

The JS script I have tried:

$("#tableID").on("click", ".edit_button", function() {
    var data = $(this).closest("td").siblings().map(function() {
        return $(this).text();
    }).toArray();

    console.log(data);
}); // the event is not recognized. no action on clicking.

There a quite a few techniques I found here stackoverflow, but most of them donot respond to click event or they return null/empty values, Is that because the form is filled dynamically?

I am pretty new to web development, Any help would be appreciated. Thanks!

Note: the database contains more than 20+ records (dynamically added), In Jsfiddle I have shown only 1, to keep the code clean. sorry for the lack of css styling :P

Did you check the console for any error? In the fiddle add the jquery js to your code — AmGates, Oct 29 '13 at 06:55
document.ready() detects button click thanks!!. but the data array is empty. — user2529058, Oct 29 '13 at 07:04
okay! well this is what mine looks like: http://i.imgur.com/zU6eeEa.png — user2529058, Oct 29 '13 at 07:13
Yess!! It works changed bind() to on().. Thanks For The Help! — user2529058, Oct 29 '13 at 07:14

score 0 · Accepted Answer · answered Oct 29 '13 at 06:58

$("#tableID").on("click", ".edit_button", function() {
    var data = $(this).closest("td").siblings().map(function() {
        return $(this).text();
    }).toArray();

    console.log(data);
});

Use like this may be it is helpful

$("#tableID").click( function() {
    var data = $(this).closest("td").siblings().map(function() {
        return $(this).text();
    }).toArray();

    console.log(data);
});

Fill form using table data

1 Answers1

Linked