Can't find form after injecting it with jQuery(I think)

Question

Im adding the form, in an on-click event, to a row in a table using (Sorry about the really long row):

$('#row'+rowvalues[0]).html('
    <form id="updform'+rowvalues[0]+'">
    <td>'+rowvalues[0]+'</td>
    <td>
        <input type="text" name="namn'+rowvalues[0]+'" value="'+rowvalues[1]+'">
    </td>
    <td>
        <input type="text" name="ingred'+rowvalues[0]+'" value="'+rowvalues[2]+'">
    </td>
    <td>
        <input type="number" name="pris'+rowvalues[0]+'" value="'+rowvalues[3]+'">
    </td>
    <td>
        <input type="number" name="fampris'+rowvalues[0]+'" value="'+rowvalues[4]+'">
    </td>
    <td>
        <Button class="upddatasave" id="sub'+rowvalues[0]+'">Submit</button>
    </form>
</td>
');
intialiseUpdatebutton();

then I initialize the button using the fuction called intialiseUpdatebutton();

that function looks like:

 function intialiseUpdatebutton() {
    $(".upddatasave").on("click", function() {
        var butid = $(this).attr('id');
        var dataid = parseInt(butid.slice(3));
        console.log(dataid);
        console.log($('#namn'+dataid).val());
        var formvalues = $('#updform'+dataid).serializeArray();
        console.log(formvalues);
     });
}

It finds the button and it works, but I can't find the form. My guess was that it cant find the injected form, but if that's the case how do I fix it? like I do with the initialise function for the button.

What Im trying to do: Im displaying data from an SQL table in a table in html - It has 2 buttons 1 update and 1 delete. Im trying to fix the update button so that when I press it the cells with the values change into a form with textfields and the values in there and then you can just change the values and press submit to save the changes.

Edit: jsfiddle.net/rh8deo79/2 <- jsfiddle

Why are you _"initializing"_ the button? this `$(".upddatasave").on("click", function() {...});` means that whenever someone click on it, the function will be executed, but because you put it inside a function it may not be able to reach it... try taking it out of the function and don't worry, jquery takes care of linking the event, if that is why you _"initialize"_ it — DIEGO CARRASCAL, May 20 '16 at 17:54
The DOM you are trying to generate is invalid. A `` cannot be a child element of a `
`. — Quentin, May 20 '16 at 18:10
ah, you might be correct - http://stackoverflow.com/questions/1249688/html-is-it-possible-to-have-a-form-tag-in-each-table-row-in-a-xhtml-valid-way . Thanks for the help. Ill try to change everything to divs instead. — Len Lens, May 20 '16 at 18:36

score 0 · Accepted Answer · answered May 20 '16 at 17:54

0

By editing your formmatting job to break up the massive one-liner, I found that you end your <form> before your <td>, which is invalid html and probably your source of error.

answered May 20 '16 at 17:54

iHowell

2,263
1
25
49

hmm, tried it. Didnt work. Sorry about the one-liner I tried with doing it with + signs and breaking rows couldnt get it to work then - must've dont something wrong. Ty for the reply though – Len Lens May 20 '16 at 17:59
Can you set up a js fiddle with a sample for rowvalues? – iHowell May 20 '16 at 18:01
I'm seeing the `form` get terminated before the first `td`, so that the inputs are not enclosed in it (at least in Chrome 49). Here's a fiddle: https://jsfiddle.net/rh8deo79/ – Jack A. May 20 '16 at 18:03
I'll try making a jsfiddle, never done it before but gimme a sec – Len Lens May 20 '16 at 18:17
I updated your js fiddle https://jsfiddle.net/rh8deo79/1/. You can now find the form if you use chrome and rightclick->inspect an element in the result. – iHowell May 20 '16 at 18:19
https://jsfiddle.net/rh8deo79/2/ <- here's one with pretty much exactly the code I have that's relevant I think. – Len Lens May 20 '16 at 18:24
http://stackoverflow.com/questions/1249688/html-is-it-possible-to-have-a-form-tag-in-each-table-row-in-a-xhtml-valid-way <- think this might be the issue – Len Lens May 20 '16 at 18:36
It could be, and it is probably a better idea to have the form outside of the ``, since it isn't wrapping your ``'s anyway. – iHowell May 20 '16 at 18:40
You could just have one form though, and update what it's action is based on what button you press. The one form would wrap the whole table. – iHowell May 20 '16 at 18:43

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

0

You need to reorganize your tags. You can't have <tr><form><td>, as described here.

You might try creating a new table inside each form.

edited May 23 '17 at 12:16

Community

1
1

answered May 24 '16 at 07:59

OutstandingBill

2,614
26
38

Can't find form after injecting it with jQuery(I think)

2 Answers2