0

I have an EJS page in which I am presenting data in the following structure:

What is the correct way to properly send ticket.ticketNumber when the button is clicked?

Thanks in advance for any tips and advice.

Update: Through using an xhttp request I have managed to receive a req.body. I am now trying to pass a parameter to the callback function but it's undefined.

This is the EJS file (please mind the onclick method):

<%- include("partials/header.ejs") %>

<h1>Please address the following tickets according to their urgency</h1>

<div class="box">
  <% openTickets.forEach(function(ticket){ %>
  <div class="item">
    <form class="tickets-form" action="" method="">
      <p>
        <span style="text-decoration: underline; font-weight: bold"
          >Ticket Number:</span
        >
        <%= ticket.ticketNumber %>
      </p>
      <p>
        <span style="text-decoration: underline; font-weight: bold"
          >Employee Name:</span
        >
        <%= ticket.employeeName %>
      </p>
      <p>
        <span style="text-decoration: underline; font-weight: bold"
          >Department:</span
        >
        <%= ticket.departmentName %>
      </p>
      <p>
        <span style="text-decoration: underline; font-weight: bold"
          >Urgency:</span
        >
        <%= ticket.urgencyLevel %>
      </p>
      <p>
        <span style="text-decoration: underline; font-weight: bold"
          >Incident Description:</span
        >
        <%= ticket.incidentDescp %>
      </p>
    </form>
    <button
      type="Submit"
      class="btn btn-primary"
      onclick="resolve(ticket.ticketNumber)"
    >
      Resolve
    </button>
  </div>
  <% }); %>
</div>

<script src="resolve.js"></script>

<%- include("partials/footer.ejs") %>

This is resolve.js:

function resolve(ticketNum) {
  var xhttp = new XMLHttpRequest();
  xhttp.open("POST", "/resolve", true);
  xhttp.setRequestHeader("Content-type", "application/json");
  data = {
    ticketNumber: ticketNum,
  };
  xhttp.send(JSON.stringify(data));
}

This is the error:

Uncaught ReferenceError: ticket is not defined
    at HTMLButtonElement.onclick

Any tips?

milner236
  • 37
  • 9
  • It should be possible with just the form, when you set the action and method properly: `
    ...
    `. Give it a try!     – philale Sep 28 '22 at 14:30
  • I’ve tried doing so, but when I do req.body is an empty object {} – milner236 Sep 28 '22 at 14:56
  • Use the middleware [`body-parser`](https://www.npmjs.com/package/body-parser), as mentioned in [this](https://stackoverflow.com/questions/9304888/how-to-get-data-passed-from-a-form-in-express-node-js/38763341#38763341) SO question! It should solve your problem. – philale Sep 28 '22 at 15:03
  • Didn't solve my problem though, still an empty object – milner236 Sep 30 '22 at 09:56
  • You have two different programs here (both written in JavaScript). Your client side JavaScript (in the `onclick` attribute) doesn't have access to the variables (i.e. `ticket`) that are defined in your server-side JavaScript (in the `<% ... %>` tags). They are different programs that will usually run on different computers. See the duplicate. – Quentin Sep 30 '22 at 10:37

0 Answers0