Nodejs Deleting row on button press using body-parser

Question

Have a call being made to a database and generating a table. I want it so I can use body-parser to know what the id / value / name is of the button I clicked that will correspond to the database entry I want to delete. Is there a way to do that using the form or will I have to add a javascript click handler to each button with the id?

<form action="/deleteQuestion" method="POST">
    <tbody>
        <% results.forEach(function(r) { %>
            <tr>
                <th scope="row">
                    <%= r.Id %>
                </th>
                <td>
                    <%= r.Question %>
                </td>
                <td>
                    <%= r.Answer %>
                </td>
                <td>
                    <%= r.Wrong1 %>
                </td>
                <td>
                    <%= r.Wrong2 %>
                </td>
                <td>
                    <%= r.Wrong3 %>
                </td>
                <td>
                    <button value=<%=r.Id %> name="Delete">Delete</button>
                </td>
            </tr>
            <% }); %>
    </tbody>
</form>

nodejs file

app.post('/deleteQuestion', async(req, res) => {
    //Won't work the way I want it to    
    const question = req.body.Delete   
})

score 2 · Answer 1 · answered Aug 15 '19 at 06:34

You should wrap the table row instead of the whole tbody, then add the Id as parameter

<tbody>
    <% results.forEach(function(r) { %>
        <form action="/deleteQuestion/"+<%= r.Id %>  method="POST">
            <tr>
                <th scope="row">
                    <%= r.Id %>
                </th>
                <td>
                    <%= r.Question %>
                </td>
                <td>
                    <%= r.Answer %>
                </td>
                <td>
                    <%= r.Wrong1 %>
                </td>
                <td>
                    <%= r.Wrong2 %>
                </td>
                <td>
                    <%= r.Wrong3 %>
                </td>
                <td>
                    <button value=<%=r.Id %> name="Delete">Delete</button>
                </td>
            </tr>
        </form>
    <% }); %>
</tbody>

then handle it in node with

app.post('/deleteQuestion/:id', async(req, res) => {
    // do the delete here using the id
})

Hmm the submit button doesn't seem to trigger the form. This table is being converted to a datatable, I wonder if that might cause problems. — Ubarjohade, Aug 15 '19 at 06:49
https://stackoverflow.com/questions/5967564/form-inside-a-table Well that isn't fair — Ubarjohade, Aug 15 '19 at 07:02
@Ubarjohade thanks for pointing it out. i guest he could just bind a click event that will pass the id and trigger a XHR request. — Jairo Malanay, Aug 16 '19 at 04:59

Ubarjohade · Accepted Answer · 2019-08-17T17:29:44.503

Some pretty hacky stuff but this seems to work the way I was hoping. if anyone knows the proper way I'd love to see a link / guide.

--EDIT

After a couple days I think this is the correct way to go about adding even handlers to buttons (I forgot about onclick events)

<head>
    <script type="text/javascript">
        function sendData(id) {
            $.post('deleteQuestion/' + id)
        }
    </script>
</head> 

<tbody>
    <% results.forEach(function(r) { %>
        <tr>
            <th scope="row">
                <%= r.Id %>
            </th>
            <td>
                <%= r.Question %>
            </td>
            <td>
                <%= r.Answer %>
            </td>
            <td>
                <%= r.Wrong1 %>
            </td>
            <td>
                <%= r.Wrong2 %>
            </td>
            <td>
                <%= r.Wrong3 %>
            </td>
            <td>
                <button type="submit" onclick="sendData(<%=r.Id %>)" class="btn btn-primary">Delete</button>
            </td>
        </tr>
        <% }); %>
</tbody>

app.post('/deleteQuestion/:id', async(req, res) => {
    console.log(req.params.id);   })

Interesting enough due to how data tables work it seems the javascript is not added to every button. It only adds to the initially shown elements. I'm sure there is an onChange event that can be used — Ubarjohade, Aug 15 '19 at 08:03

Nodejs Deleting row on button press using body-parser

2 Answers2