Edit dynamically created row in a form

Question

I have difficulties to edit in form dynamically added rows. For example if some of the cell in the row have error - clicking on it will feed the form with selected row. Hope I'm clear.

Here is a code:

(document).ready(function(){
    $("#inputtitle").append("<input type='text'  name='type1' placeholder='Title'/><br>");
    $("#inputremarks").append("<input type='text'  name='type2' placeholder='Remarks'/><br>");
    $("#inputdate").append("<input type='text'  name='type3' placeholder='Date'/><br>");
    $("#inputoption").append("<input type='text'  name='type4' placeholder='Option'/><br>");
});

$("form").submit(function(e){
    e.preventDefault();
    var newName = $('form').find('input[name="type1"]').val();
    var newName1 = $('form').find('input[name="type2"]').val();
    var newName2 = $('form').find('input[name="type3"]').val();
    var newName3 = $('form').find('input[name="type4"]').val();
    $('table').append('<tr><td>' + newName + '</td><td>' + newName1 + '</td><td>' + newName2 + '</td><td>' + newName3 + '</td></tr>'  );
});

Sorry for being not clear. My question was how to feed back the form when click to one of the new created row. Below is updated JSFiddle with approximate solution, but not correct, because probably need another button with name UPDATE and may be need another column with ID. DEMO.

you are not checking for any error there. So your question is not clear, at least for me — A. Wolff, Dec 30 '13 at 13:04
first check errors in $("form").submit(function(){}); then tell if error. — Sohil Desai, Dec 30 '13 at 13:19
I still have no clue what you mean by "how to feed back the form". Edit your question and give a set of instructions on what you do, what you expect that happens, and what happens now. I notice that you don't escape any html before inserting it as a table row (http://stackoverflow.com/questions/5499078/fastest-method-to-escape-html-tags-as-html-entities), but other than that I don't see what would be wrong. — Sumurai8, Jan 05 '14 at 13:11
Ok, another try. When add row with data and accidentally mistyped something I need to edit it in the same form, so I click on wrong row maybe using $('table tbody tr').click(function(){} return back into form the clicked row so I can edit it. English not my language, so I'm very sorry. — Esoha, Jan 05 '14 at 14:08

score 0 · Answer 1 · edited May 23 '17 at 10:31

0

I desided to go by different way. So I created additional button to run a script for editing cell of created table. The link to the code you can find [here] Using jQuery to edit individual table cells

edited May 23 '17 at 10:31

Community

1
1

answered Jan 17 '14 at 04:21

Esoha

31
4

Edit dynamically created row in a form

1 Answers1