Input from user not displaying on server side page properly after running query

Viewed 14

Currently I have a form where the user picks a movie and it's value is the movieID

<form method="GET" action="http://localhost:8080">
  <div id="radio-section">
    <input type="radio" id="wake" name="movie" value="954">
    <label for="wake">Wake Jaws</label>
    <br>
    <input type="radio" id="tomato" name="movie" value="894">
    <label for="tomato">Tomato Hellfighters</label>
    <br>
    <input type="radio" id="west" name="movie" value="969">
    <label for="west">West Lion</label>
    <br>
    <input type="radio" id="edge" name="movie" value="272">
    <label for="edge">Edge Kissing</label>
    <br>
    <input type="radio" id="lolita" name="movie" value="528">
    <label for="lolita">Lolita World</label>
    <br>
    <input type="radio" id="dancing" name="movie" value="206">
    <label for="dancing">Dancing Fever</label>
    <br>
    <input type="radio" id="random" name="movie" value="random">
    <label for="random">Show me a random movie!</label>
    <br>
  </div>
  <input type="submit">
</form>

The input gets pulled and then used within a query string that pulls the movie based of the ID user input and then displays back the movie title and description through node.js

let http = require("http");
let mysql = require("mysql");
const PORT = 8080;
let output = '';
let con;
let count = 0;

initializeDB();
let httpServer = http.createServer(processServerRequest);

httpServer.listen(PORT);

function processServerRequest(request, response){

    grabInput(request);

    console.log(`${output} recieved`);
    response.writeHead(200, {'Content-Type':'text/html'});
    response.write('Here is the information you were looking for');
    response.write(output);
    response.end();
} //end of processServerRequest fucntion 

function grabInput(request){
    let base = "http://" + request.headers["host"];
    let url = new URL(request.url, base);

    console.log('Grabbing results...');

    let movieID = url.searchParams.get("movie");
    
    if (movieID == 'random'){
        movieID = Math.floor(Math.random() * 1000) + 1;
    }

    let sqlquery = `select title, description from film where film_id = ${movieID};`
    con.query(sqlquery, processResult);
}

function processResult(err, result){
    if (err){
        console.log("Error detected.");
        throw err;
    } //end of if statement
    else{
        console.log(`page opened ${count} times`)
        count++;
        console.log(`There were ${result.length} rows returned`);
        result.forEach(printMovie);
    } // end of else statement
} //end of processResult function 

function printMovie(record){
    console.log(`${record.title} ${record.description}`);
    output=`<p><strong>${record.title}</strong><br><br>${record.description}</p>`;
}

For some reason, instead of just displaying the correct output, it initially does not have the movie title and description after I press submit. When I go back to the form page and select another movie and press select again, it then displays the movie information for the one I selected before.

example:

  1. I select Jaws and press submit
  2. nothing displays
  3. I go back select Spiderman and press submit
  4. Jaw movie information displays

node.js output

It looks like my processResult function runs twice, grabbing the correct output the first time, but then running again and assigning output to an empty string. How can I make it so it displays the proper movie information?

0 Answers
Related