How to get data from url into post request?

Question

Any help appreciated. I've got an app that pulls data from google books api. From each book page, the user is able to leave a review. The path to the review is /review/${isbn Number}. Each page has a path based on the isbn. The review routes work and I'm able to make the post request through insomnia/postman with no issues, I'm just having trouble with the front-end js in pulling the data from the input boxes to make the post request. I'm not sure if the issue is because the isbn being in the path. Below is my front-end javascript that I am unable to fix.

const newFormHandler = async (event) => {
    event.preventDefault();
    console.log("testing")
    const description = document.querySelector('#description').value;
    const reviewTitle = document.querySelector('#reviewTitle').value;
    const isbn = window.location.search
    if (description) {
      const response = await fetch(`api/review/${isbn}`, {
        method: 'POST',
        body: JSON.stringify({ description, reviewTitle }),
        headers: {
          'Content-Type': 'application/json',
        },
      });
  
      if (response.ok) {
        document.location.reload();
      } else {
        alert('Failed to create review');
      }
    }
  };
  
  document
    .querySelector('.form-group')
    .addEventListener('submit', newFormHandler);

My form is below:

<div class="col form-group">
      <div class ="card reviewCard" style = "background-color:#fcf8f3; color: #65625e;">
        <form id="blog-form">
            <div>
              <label for="reviewTitle">Review Title</label>
              <input
                value="{{title}}"
                id="reviewTitle"
                name="reviewtitle"
                placeholder="Enter Review Title"
                type="text"
                required="required"
                class="form-control"
                data-bv-notempty="true"
                data-bv-notempty-message="The title cannot be empty" 
              />
            </div>

          <div>
            <label for="review">Review</label>
            <textarea
              id="description"
              name="review"
              cols="40"
              rows="10"
              required="required"
              class="form-control"
            >{{description}}</textarea>
          </div>
          <div class="form-group">
            <button type="submit" class="btn btn-primary">Submit</button>
          </div>
        </form>
      </div>
    </div>

    </div>

And here is my route that works fine with insomnia, no issues.

router.get('/review/:id', async (req, res) => {
  try { 
    const isbn13 = req.params['id'];
    const reviewData = await Review.findAll({ where: {
    isbn:isbn13
  }, 
  include: [
    {
      model: User,
      attributes: ['name'],
            }
      ]
  })
  const reviews = reviewData.map((review) => review.get({ plain:true}));
  // console.log(isbn13);
  res.render('review', {
    isbn: isbn13, reviews:reviews
  });
} catch (err) {
  console.log(err)
}
});

Any help appreciated. I tried to pull in the isbn number from the path, but with no success. I think I have it formatted wrong somehow.

Answer 1

First console log your req

You should see the body containing some data.

In a get request the they are arguments in the URL.

In a Psot request they are in the body of the request.