javascript - Correct way to send data between html, JS and Node to MongoDB

Question

I have a table in my view that is getting populated from the DB.

        <td class='schedule-td' id='vname-<%=index%>'><%=name%></td>
        <td class='schedule-td' id='vphone-<%=index%>'><%=phone%></td>
        <td class='schedule-td' id='vmeal-<%=index%>'><%=mealDesc%></td>

Each row has the above 3 fields plus a button and when the button is clicked a pop-up comes up where the user can enter that info, if its empty and then I need to update the data on the DB for that entry. The pop-up is a form which gets submitted to a post route at the pop-up itself.

    <div class="popup-div hide" id='volunteerDiv'>
        <form action="./<%= id %>" method="POST">
            <input type="hidden" name="userID" id='userID'>
            <h5 class='header'>Please enter your details</h5>
            <div class="input-group">
                <label for="name">name:</label>
                <input type="text" name="name" id="name">
            </div>
            <div class="input-group">
                <label for="phone">phone#:</label>
                <input type="text" name="phone" id="phone">
            </div>
            <div class="input-group">
                <label for="desc">Meal</label>
                <input type="text" name="desc" id="desc" 
                        placeholder="What will you be bringing?">
            </div>
            <button type="submit">Submit</button>
        </form>
    </div>

The thing is I need to know which row or entry needs to be updated at the moment what I am doing is storing the _id from mongo in a data-attribute on each button and then when the button is clicked I pass that value to the hidden field on the form and submit the form.

Button

                        <td class='td'>
                            <button class='btn' id='addBtn-<%=index%>'
                                    data-user_id='<%= userID %>'>Add</button>
                        </td>

JS

    userID.value = event.target.dataset.user_id;

For some reason though I feel like im doing this incorrect and too convoluted and like maybe its violating the MVC principles by having the DB id value in the html.

Also that the id from the db can be seen in the dev tools seems bad to me.

Is there a better way of knowing/identifying what db entry the table row that is being interacted belongs to and sending that to the back-end???

Ive thought of using the index of the row to match to the index of the db which would help with not showing the id from the DB in the view or handling the post with Javascript but both methods still seem like they would be missing something.

question from:https://stackoverflow.com/questions/65888363/correct-way-to-send-data-between-html-js-and-node-to-mongodb

Answer 1

Waitting for answers