How to pass the value of a button ID into a GET request?

Question

I have a Node.js application which used a database that consists of many students and their current marks. I am able to view this in a table by first getting the data from MongoDB and sending it to the .ejs file.

index.js

router.get("/dashboard", function (req, res) {
  markModel.find({}, function (err, allDetails) {
    if (err) {
      console.log(err);
    } else {
      res.render("marks", { details: allDetails});
    }
  });
});

marks.ejs

<% if(details!=null) { %>
<table>
<tr>
    <th>Student</th>
    <th>Mark</th>
</tr>
<% details.forEach(function(item){ %>
<tr>
    <td><%= item.name%></td>
    <td><%= item.mark%></td>
</tr>
<% }) %>
</table>

What I want to do is create an Update button in every row that will take me to a separate page where I can update a student's mark. I thought of adding a button where I can use the _id to identify the record but I'm not sure how to pass this value into a GET request to the page where I can update the marks separately.

<td><a href="/update" class="btn btn-secondary" id = <%= item._id%> >Update</a></td>

Another approach I had was using a form.

<form method="post" action="/marks">
     <input type="submit" id="<%= item._id%>" name="<%= item._id%>" value="Update">
</form>

But I got stuck on how to how to pass the value of _id while redirecting to /update.

router.post("/dashboard", function (req, res) {
   res.redirect("/update")
});

This is what I have so far. I'm not sure what to give for the reqID so I have left it blank.

router.get("/update", (req, res) =>
  res.render("update", {
    reqID: 
  })
);

Please let me know if there's anything else I can add and how to resolve this issue.

score 1 · Accepted Answer · answered Sep 04 '21 at 14:39

1

What you can do is add an hidden input to the form. By doing so, you can easily provide any data you want to the request.

<form method="post" action="/update">
     <input type="number" name="id_name" value="<%= item._id =>" hidden>
     <input type="submit" value="Update">
</form>

Assuming that you are using a bodyParser, you will be able to reach the data by doing the following:

router.get("/update", (req, res) =>
  res.render("update", {
    reqID: req.body.id_name
  })
);

answered Sep 04 '21 at 14:39

Eric Qvarnström

779
6
21

Hi. The form here is sending a post request directly to `/update`. I want to it to post to `/dashboard`. I will be using other forms in `/update` so will that POST request cause a problem too? – vnk Sep 04 '21 at 15:02
@vnk Maybe I did not fully understand your question :) If you want to show the page for updating this specific resource, just change the form method to GET. However, if you would to actually update the data, keep it as a POST request. – Eric Qvarnström Sep 04 '21 at 16:06
1

Okay. I'll try this. Thank you! – vnk Sep 04 '21 at 16:08

score 0 · Answer 2 · answered Sep 04 '21 at 14:06

0

make a link like that : ?id=VALUEOFTHEID

answered Sep 04 '21 at 14:06

score 0 · Answer 3 · answered Sep 04 '21 at 15:39

There are different ways you can pass the values in redirect.

As the document suggests, you can pass the value as a param or you can pass it in query or in header.

To pass it in query or Cookie, follow this solution. To pass it in header, follow this solution.

How to pass the value of a button ID into a GET request?

3 Answers3