Jquery append is not working when appending form inside table row

Question

I am trying to add a dynamic form inside a table row. Below is my code.

$(`#event_draw_table`).append(`
    <tr>
        <form method="post" action="">
            <td><input type="text" name="addmore[0][name]" placeholder="Draw Name" class="form-control" /></td>
            <td><input type="text" name="addmore[0][price]" placeholder="Start" class="form-control" /></td>
            <td><input type="text" name="addmore[0][price]" placeholder="End" class="form-control" /></td>
            <td>
            <button type="submit" name="add" id="save_draw" class="btn btn-sm btn-success">Save</button>
            <button type="button" name="add" id="add" class="btn btn-danger">Remove</button>
            </td>
        </form>
    </tr>
`);

The above code is working fine and table row is getting append but the problem I am facing is that the form element is blank.

all my td elements are not getting wrapped inside form element. how to fix it?

Below is my html code.

<tbody id="event_draw_table">
     <tr>
        <td><input type="text" name="addmore[0][name]" placeholder="Draw Name" class="form-control" /></td>
        <td><input type="text" name="addmore[0][price]" placeholder="Start" class="form-control" /></td>
        <td><input type="text" name="addmore[0][price]" placeholder="End" class="form-control" /></td>
        <td>
           <button type="submit" name="add" id="save_draw" class="btn btn-sm btn-success">Save</button>
           <button type="button" name="add" id="remove_draw" class="btn btn-sm btn-danger">Remove</button>
        </td>
     </tr>  
  </tbody>

Does this answer your question? [Can we add div inside table above every ?](https://stackoverflow.com/questions/23440362/can-we-add-div-inside-table-above-every-tr) — Abhishek Pandey, Feb 25 '20 at 13:12
No. It does not answer my question. I tried adding another but it is changing the table design. — himanshu, Feb 25 '20 at 13:16
Please wrap your code into $(document).ready(function(){ //your JS code }); — Harsimranjit Singh, Feb 25 '20 at 13:16
A `form` element cannot be a child of a `tr`. Do you really want a form for each row or to wrap your whole table with a form? — Dumisani, Feb 25 '20 at 13:18
Yes @Dumisani. I want a seperate form for each table row. Is their any way to achieve this. — himanshu, Feb 25 '20 at 13:20

Dumisani · Accepted Answer · 2020-02-25T13:44:37.683

0

Create a form and give it an id form id="form1" then assign the form to each input and button inside the row form="form1". Remember to give other rows different form id's if you'll be appending multiple rows.

$('#event_draw_table').append('
    <tr>
        <form id="form1" method="post" action=""></form>
        <td><input form="form1" type="text" name="addmore[0][name]" placeholder="Draw Name" class="form-control" /></td>
        <td><input form="form1" type="text" name="addmore[0][price]" placeholder="Start" class="form-control" /></td>
        <td><input form="form1" type="text" name="addmore[0][price]" placeholder="End" class="form-control" /></td>
        <td>
            <button type="submit" form="form1" name="add" id="save_draw" class="btn btn-sm btn-success">Save</button>
            <button type="button" form="form1" name="add" id="add" class="btn btn-danger">Remove</button>
        </td>
    </tr>
');

edited Feb 25 '20 at 13:44

answered Feb 25 '20 at 13:29

Dumisani

2,988
1
29
40

Yes, the form will never wrap the inputs when added to a row but when you click on the submit button the correct inputs will be used to submit the data which is what you want. – Dumisani Feb 25 '20 at 13:37
It worked!!!. Can you please explain what I was doing wrong and what you did to make it work. And Thank You so much @Dumisani – himanshu Feb 25 '20 at 13:38
Simply telling the inputs which form to work with does the trick. You don't have to worry about the form wrapping the fields or not. – Dumisani Feb 25 '20 at 13:46

Jquery append is not working when appending form inside table row

1 Answers1