How to add a form per row in a table (dynamic rows added)

Question

Hello! Given that each row contains information for a form and are dynamically generated from a php echo, I want to send to the form only the inputs within the row that has been selected(event is thrown onclick of checkbox). How would you do it?

I used let rowForm = $(event.currentTarget).closest("tr"); But I've been stuck with it for a while. Do you mind giving me a hand? After that, I will send the resulting form to a php by a fetch.

ex: new URLSearchParams(new FormData(document.getElementById("formRegistroPedido")));

If you want a form in each row, you need to put the entire form inside one of the `` elements. — Barmar, Jan 17 '23 at 18:26
Use [event delegation](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) to implement the handler for the dynamically0-added forms. — Barmar, Jan 17 '23 at 18:29
The thing is that each input must be alone in each . I'm not allowed to change that structure. — Josué Campos, Jan 17 '23 at 18:31
You can do `
...
`. Then use JavaScript to copy from the inputs in the other columns to the hidden inputs. — Barmar, Jan 17 '23 at 18:34
Options: don't use a `
` at all and use JS to build / POST / "fetch" the data ("fetch" to *send* data, who comes up with these names?). Or: build your table using `
` (or just normal divs) - then you can also design a responsive layout without the restrictions of a `table` — freedomn-m, Jan 17 '23 at 18:46

score 0 · Answer 1 · answered Jan 18 '23 at 00:07

I tried Open AI to solve this. I finally solved the problem:

$(document).on('click', '.check', function(){
      var row = $(this).closest("tr"); 
let rowInputs = Array.from(row.find('td input'));
    let values = {};
let form = new FormData(); 
rowInputs.forEach(input => {
    if(input == rowInputs[rowInputs.length - 1]) {
        return;
    }
    let inputValue = input.value;
    //Append the input value to the form
    form.append(input.name, inputValue);
});
form.forEach((value, key) => {
  console.log(key + ': ' + value);
});
});

input{
 width: 50%; 
}
table{
  border: 10px;
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<form id="form1">
<table border=1>
<tr>
  <th>Prueba</th>
  <th>Prueba2</th>
  <th>Prueba3</th>
  <th>Prueba4</th>
</tr>
<tr>
  <td> <input form="form1" name="letrA" type="text" required></td>
  <td> <input form="form1" name="letrB" type="text" required></td>
  <td> <input form="form1" name="letrC" type="text" required></td>
  <td> <input class='check' type="checkbox"required></td>
</tr>
<tr>
  <td> <input form="form1" name="letrA" type="text" required></td>
  <td> <input form="form1" name="letrB" type="text" required></td>
  <td> <input form="form1" name="letrC" type="text" required></td>
  <td> <input class='check' type="checkbox"required></td>
</tr>
</table>
</form>
</html>

The printed value is a formData, solving my main problem of getting information from the rows to a formdata. Now i can send it to a fetch api and we are good to go! If you have questions about it feel free to comment.

How to add a form per row in a table (dynamic rows added)

1 Answers1