How do I pass the value of the variable pokemonname from an ejs file to a nodejs server side-CodePudding

This is my other.ejs code:

<input type="search" id="default-search"  placeholder="Search Pokemon" required="">
<button type="submit" id="searchpokemon" onclick="getPokemon()" >Search</button>

<script> function getPokemon() {
            const pokemonname = document.getElementById("default-search").value;
            //forchecking the value of pokemonname
            console.log(pokemonname)
        } </script>

I want to pass the value of pokemonname to the ${passthevaluehere} in the node.js server side filenamed server.js which has this current code:

var express = require('express');
var app = express();
var weather = require('weather-js');
const dayjs = require('dayjs')
var fetchUrl = require("fetch").fetchUrl;

app.set('view engine', 'ejs');

app.listen(3000)
app.get('/other', async function (req, res) {
    fetchUrl(`https://pokeapi.co/api/v2/pokemon/${passthevaluehere}`, function(error, meta, body){
        var meals = JSON.parse(body)
        var data = {
            url: req.url,
            itemData: meals
        }
        console.log(data.itemData)
        res.render('other', {title:'OtherAPI', data});
    });
    
});

Still new to front-end and back-end developing.

CodePudding user response：

Put the <input> field and the <button> in a <form>, remove the getPokemon function and the onclick, and instead make the button submit the entire form to the backend.

<form action="other" method="get">
  <input type="search" id="default-search" name="searchterm" placeholder="Search Pokemon" required="">
  <button type="submit" id="searchpokemon">Search</button>
</form>

Now pressing the button will cause the browser to replace the current page with GET http://your.server/other?searchterm=<what the user typed in the search field>. In other words: It reloads the current page, but with a different search term.

The GET request will invoke your server.js file, where you must replace the (undefined) variable ${placethevaluehere} with ${req.query.searchterm}.

But it seems that your other.ejs code does not make use of the fields title and data, therefore the new page will look exactly like the previous one. But perhaps you did not share the full code of other.ejs.

CodePudding user response：

Writing this answer without having any strong knowledge of nodejs view engine. In Nodejs we have something called middleware functions. In middleware we perform some actions/verifications then pass it to the next function. In NodeJS it would basically look like this:

route.get( getPokemon,searchPokemon);

So, where the getPokemon function will perform some actions, for example getting the value from the html and then we pass the data to the next function for further actions/verifications.

To pass the data we use res.pokemon = pokemonname /Notice we're creating a new object named pokemon in the res/

Now in the searchPokemon function we obtain the data using res.pokemon /Here, res.pokemon is the same object which we created in the previous function./

An example will look like this:

router.get(verify,sendMess);

const verify=async(req,res,next)=>{
const pokemons=req.body;
if(pokemons) res.pokemonName=pokemons;
next(); /* To call the next function we have to use the next method available in the middlewares.*/
}

const sendMess=async(req,res)=>{
res.status(200).send(res.pokemonName);
}

If you still have some doubts using middleware, then Check out the docs. I hope this helps, if it does please accept my answer with an upvote.