How can I send button value from ejs to server in for loop with jQuery?-CodePudding

I have some dataset includes crypto coin names, symbols etc. When I clicked the button, I expect to see coin symbol in console. First one is okey but others did not work. I see empty. I want to see all matching datas with name or symbol when clicked the details. Where is my mistake ?

My ejs

<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
  <table style="width:850px; margin:15px; text-align: center;">
    <caption>
      <h1>Coins</h1>
    </caption>
    <thead style="font-size: 20px;">
      <tr style="border:2px solid">
        <td>Name</td>
        <td>Slug</td>
      </tr>
    </thead>
    <tbody>
      <% for (i=0; i<100; i  ){ %>
      <tr>     
            <td> <%= cName[i] %> </td>
            <td> <%= symbol[i] %> </td>
            <td>
              <form method="post" id="form" action="/">
              <input id="hiddeninput" name="hiddeninput" type="hidden" />
              <button id="coinName" value="<%= symbol[i] %>" name="buttonname">Detail</button> </td> //Here comes from Mongo like BTC,ETH..
            </form>

            //and some td's

      </tr>
      <% } %>
    </tbody>

    <tfoot>
    </tfoot>
  </table>

  <script>
      $('#coinName').on('click', function(){
        $('#hiddeninput').val($(this).val());
      });
  </script>

</body>
</html>

Ejs looks like

Name	Slug	Detail
Bitcoin	BTC	DetailButton
Ethereum	ETH	DetailButton

Server.js

const bodyParser = require('body-parser');
const express = require('express');
const app = express();
const MongoClient = require('mongodb').MongoClient;
var url = "mongodb://localhost:27017/";

app.use(express.static('public'));
app.use(bodyParser.urlencoded({ extended: true }));
app.set('view engine', 'ejs');

const name = [];
const symbol = [];
const price = [];
const date = [];

app.get("/", (req, res) => {
    MongoClient.connect(url, function (err, db) {
        if (err) throw err;
        var dbo = db.db("cryptoDb");
        dbo.collection("coinTable").find({}).toArray(function (err, finds) {
            if (err) throw err;

            for (i = 0; i < finds[0].result.length; i  ) {
                name.push(finds[0].result[i].name);
                symbol.push(finds[0].result[i].symbol);
                price.push(finds[0].result[i].price);
                date.push(finds[0].result[i].date);
            }

            res.render('index', {
                cName: name,
                symbol: symbol,
                len: finds[0].result.length,
                cPrice:price,
                cDate:date
            });
            db.close();
        });
    });
})

app.post('/', (req, res) => {
    console.log(req.body.hiddeninput);
    //Here is my function, fetch all datas from Mongo where matches hiddeninput

  
})

var server = app.listen(3000, function () {
    console.log(`port: ${server.address().port}`);
}
)

Thanks a lot in advance!

CodePudding user response：

IDs must be unique. Just have one form. The submit button name and value will submit the button that is clicked

No need for script

<form method="post" id="form" action="/">
  <table style="width:850px; margin:15px; text-align: center;">
    <caption>
      <h1>Coins</h1>
    </caption>
    <thead style="font-size: 20px;">
      <tr style="border:2px solid">
        <td>Name</td>
        <td>Slug</td>
      </tr>
    </thead>
    <tbody>
      <% for (i=0; i<100; i  ){ %>
        <tr>
          <td>
            <%= cName[i] %>
          </td>
          <td>
            <%= symbol[i] %>
          </td>
          <td>
            <button name="coinName" value="<%= symbol[i] %>">Detail</button> </td> //Here comes from Mongo like BTC,ETH..
        </tr>
        <% } %>
    </tbody>

    <tfoot>
    </tfoot>
  </table>
</form>