Connection error via express app

Question

I am using express app being run through electron. What`s happening is that a list of avaialble items is displayed to the user, and upon click it runs a python code using the information of that item.

Below is the routes

 let sqlSelectBoxInformation = "SELECT DISTINCT longestDimension, box_id from box WHERE occupied ='unoccupied'";

         connectionBoxInformation.query(sqlSelectBoxInformation, function(err, rows, fields) {

        if (!err) {
          // Check to see if the user entered hashtag is found in the database
          // Create a variable to track if the item was found

           if(rows.length > 0){


          var wasFound = false;
          //  if (databaseHashtag == userEnteredHashtag) {
            console.log(databaseHashtag);

                var data = {
                 rows: rows,
                 userHashtag: databaseHashtag
                }
                res.render('delivery/chooseBox', data);

               // Change the variable to true
               wasFound = true;
          }
      else {
          res.render('delivery/alloccupied');
      }

Below is the view

 <h3>Please begin by selecting the box size below:</h3>

<!-- add if statement-->

        <form method="post" action="/delivery/chooseBoxSelected">
                           <input type="hidden" name="userHashtag" value="{{userHashtag}}">

            {{#each rows}}


            <input type="hidden" name="boxSelectedValue" value="{{this.box_id}}">
           <input type="hidden" name="boxSelectedDimension" value="{{this.longestDimension}}">

            <button class="btn-dimension" type="submit">
                <i class="fa fa-cube" aria-hidden="true"></i>
                &nbsp;Longest dimension {{this.longestDimension}}"
            </button>

                {{/each}}

What happens is that when only one item is pulled from the database and displayed as a list to the user, upon click it works. When multiple items is pulled from the database and displayed to the user, it runs a connection error.

Below is the route page (once the user has click on an item, it gets posted to this route page)

let sql = `SELECT box_id, cubby_id, occupied, comport
           FROM box
           WHERE longestDimension = ?
           AND LOWER(box_id) = LOWER(?)`;

    connection.query(sql, [boxSelectedDimension, boxSelectedValue] , function(err, rows, fields) {
        if (!err) {
            for(var i=0; i< rows.length; i++) {
              // Make the comparaison case insensitive
              if (rows[i].occupied == `unoccupied`) {
                console.log("unoccupied");


          var comport = rows[i].comport;
          var command = "open" + rows[i].cubby_id;
          var commandClose = "close" + rows[i].cubby_id;


          console.log(command);
          console.log(comport);


          var options = {
            scriptPath: 'python/scripts',
            args: [command, comport, commandClose] // pass arguments to the script here

          };


          PythonShell.run('controlLock.py', options, function (err, results) {
            if (err) throw err;
            console.log('results: %j', results);
          });

Again, no connection error is thrown with only one item being rendered, but it seems to have issues with multiple within the form. I am guessing the issue is in the view.

UPDATE

More code

// Using post instead of get because a form was submitted with the method post
router.post('/', function(req, res){

    // Store the box location in the form of box_id
    var boxSelectedValue= req.body.boxSelectedValue;
    var boxSelectedDimension = req.body.boxSelectedDimension;
  var userHashtag = req.body.userHashtag;

Answer 1

The simplest way I can think of to fix it would be to put each button in a separate form that each has a separate dimension set in it. Then, the dimension you get in the form post would be the only the one for the button that was pressed.

My handlebars might be a bit rusty, but perhaps something like this:

{{#each rows}}

    <form method="post" action="/delivery/chooseBoxSelected">
        <input type="hidden" name="userHashtag" value="{{userHashtag}}">
        <input type="hidden" name="boxSelectedValue" value="{{this.box_id}}">
        <input type="hidden" name="boxSelectedDimension" value="{{this.longestDimension}}">

        <button class="btn-dimension" type="submit">
            <i class="fa fa-cube" aria-hidden="true"></i>
            &nbsp;Longest dimension {{this.longestDimension}}"
        </button>
    </form>
{{/each}}  

And, you may have to adjust the CSS to deal with the fact that this is now N separate forms (one for each button).