Form Select onChange Sends Data/Info to Query on Server-CodePudding

I'm using Nodejs, Express, and EJS.

Here's what works... I can use an unordered list of hyperlinks and send the info/variable via req.params this way...

db.ejs code

<ul>
    <% dbTitle.forEach(function(dbTitle){ %>
       <li><a href="/db/<%= dbTitle.dbTitle %>"><%= dbTitle.dbTitle %></a></li>
    <% }) %>
</ul>

server.js code

app.get('/db/:dbTitle', async (req, res) => {
  const {dbTitle} = req.params;
  console.log(dbTitle);
  try {
const tabTitleResult = await session.run(`MATCH (db:Database {Title: $dbTitle})-->(t:Table)-->(tv:TableVersion)
Where NOT (tv)<--(:InformationAsset)
RETURN  db.Title as dbTitle, tv.Title as tabTitle Order By db.Title, tv.Title ASC`, {dbTitle}); 

const tabTitleArr = tabTitleResult.records.map(({_fields}) => {
   return {dbTitle:_fields[0],tabTitle:_fields[1]};
});
    res.render('table.ejs', { tabTitle: tabTitleArr});
    //console.log(tabTitleArr)
  } catch(e) {
    console.log("Something went wrong", e)
  }
});

everything from above displays nicely on this page...

table.ejs code

<table>
    <tr>
        <th>Database-Title</th>
        <th>Table-Title</th>
     </tr>
    <% tabTitle.forEach(function (tabTitle){ %>
        <tr>
            <td><%= tabTitle.dbTitle %></td>
            <td><%= tabTitle.tabTitle %></td>
            <% }) %>
        </tr>
</table>

Here's what doesn't work... Instead of an unordered list of hyperlinks, I would prefer to have a dropdown select, however my code doesn't work when I try to use a form select option method to send the info/variable via req.body...

db.ejs code

<form method="post" action="/db">
<label>Database Name</label><br>
   <select name="dbTitle" onchange="this.form.submit();">
      <option selected disabled> -- select an option --
         <% dbTitle.forEach(function(dbTitle){ %>
            <option name="dbTitle" value="<%= dbTitle.dbTitle %>"><%= dbTitle.dbTitle %></option>
         <% }) %>
      </option>
   </select>
</form>

(Note: I am aware of how strange the nested options seem, this is required to force the --select an option-- option to appear first, removing the nesting with only the one option with data does not help. Also, you'll note that I'm adding name="dbTitle" on more than one element in a desperate attempt to make something work, I believe it should only be on the select element. Last, I'm also trying to send any info/variable via value="<%= dbTitle.dbTitle %>.)

server.js code

app.post('/db/:dbTitle', async (req, res) => {
  const {dbTitle} = req.body;
  console.log(dbTitle);
  try {
const tabTitleResult = await session.run(`MATCH (db:Database {Title: $dbTitle})-->(t:Table)-->(tv:TableVersion)
Where NOT (tv)<--(:InformationAsset)
RETURN  db.Title as dbTitle, tv.Title as tabTitle Order By db.Title, tv.Title ASC`, {dbTitle}); 

const tabTitleArr = tabTitleResult.records.map(({_fields}) => {
   return {dbTitle:_fields[0],tabTitle:_fields[1]};
});
    res.render('table.ejs', { tabTitle: tabTitleArr});
    //console.log(tabTitleArr)
  } catch(e) {
    console.log("Something went wrong", e)
  }
});

From here, when I run and then select from the dropdown, I receive an error of Cannot POST /table, and nothing shows in my console.log(dbTitle);, so I'm assuming no variable is being sent from my form to the server.

From what I've gathered in using a form vs ul li hyperlinks, there are some differences where the form needs to have method="post", and the server needs to be app.post with req.body instead of req.params. Or maybe this is incorrect?

Thank you for any help you can share.

CodePudding user response：

I figured it out, here's what I needed to do.

Everything was fine on my client db.ejs.

In my server.js, I needed to change app.post('/auradbtable/:dbTitle' to app.post('/auradbtable?:dbTitle'... change the '/' to '?'. And using const {dbTitle}=req.body; is correct.