Creating dynamic pages using user input in Node and Express

Question

Creating dynamic pages using user input in Node and Express

Currently, I am facing a challenge in rendering text using node/express. Within my project setup, there is an HTML file containing a form.

The file named search.ejs looks like this:

$(document).ready(function(){
    var userInput;
    $("#submit-button-id").click(function(){
        userInput = $1_11_1("#userInput").val();
        $.get("http://localhost:3000/searching", {
            userInput: userInput
        }, function(){});
    });
});

In the app.js file, here is the relevant code snippet:

app.get('/searching', function(req, res){
    var userInput = req.query.userInput;

    /** Successfully retrieving the userInput (as shown above) */

    res.send(userInput);

    /** Now, wanting to display the userInput (e.g., on localhost:3000/results) */
});

I would appreciate any assistance or resources related to this issue. Thank you!

javascript html node.js express

Answer 1

Answer №1

Within your app.js file, the userInput information is being sent back to the search.ejs location. Here is where it happens:

$(document).ready(function(){
    var userInput;
    $("#submit-button-id").click(function(){
        userInput = $1_11_1("#userInput").val();
        $.get("http://localhost:3000/searching", {
            userInput: userInput
        }, function(){***User data can be used here***});
    });
});

To display your raw data in a div on your HTML page named "render-div," you can use the following code:

$(document).ready(function(){
    var userInput;
    $("#submit-button-id").click(function(){
        userInput = $1_11_1("#userInput").val();
        $.get("http://localhost:3000/searching", {
            userInput: userInput
        }, function(userInputData){
            $('.render-div').append(userInputData);

        });
    });
});`

Answer 2

Within your app.js file, the userInput information is being sent back to the search.ejs location. Here is where it happens:

$(document).ready(function(){
    var userInput;
    $("#submit-button-id").click(function(){
        userInput = $1_11_1("#userInput").val();
        $.get("http://localhost:3000/searching", {
            userInput: userInput
        }, function(){***User data can be used here***});
    });
});

To display your raw data in a div on your HTML page named "render-div," you can use the following code:

$(document).ready(function(){
    var userInput;
    $("#submit-button-id").click(function(){
        userInput = $1_11_1("#userInput").val();
        $.get("http://localhost:3000/searching", {
            userInput: userInput
        }, function(userInputData){
            $('.render-div').append(userInputData);

        });
    });
});`

Answer 3

Answer №2

If you refer to the official documentation, it states that the response is passed as a parameter in your callback function. Therefore, you can implement it like this:

$.get("http://yourdomain.com/search", {input: userInput},
    function(response){
      alert(response);
 });

Answer 4

If you refer to the official documentation, it states that the response is passed as a parameter in your callback function. Therefore, you can implement it like this:

$.get("http://yourdomain.com/search", {input: userInput},
    function(response){
      alert(response);
 });

Answer 5

Answer №3

If you are utilizing EJS, you can achieve this as shown below:

To start, in your results.ejs document

<div id="showResult"><h2><%= result %></h2></div>

Subsequently, in your app.js file

app.get('/search', function(req, res){
var userInput = req.query.inputValue;
res.render('results.ejs',{result:userInput});
});

Answer 6

If you are utilizing EJS, you can achieve this as shown below:

To start, in your results.ejs document

<div id="showResult"><h2><%= result %></h2></div>

Subsequently, in your app.js file

app.get('/search', function(req, res){
var userInput = req.query.inputValue;
res.render('results.ejs',{result:userInput});
});

Creating dynamic pages using user input in Node and Express

Answer №1

Answer №2

Answer №3

Similar questions

Update the JavaScript to modify the styling based on the specific value of the

Implementing cross-browser COMET in node.js

When a node using express encounters :id, it is directed to a specific location

I continue to encounter the following error message: Error: Route.post() expects callback functions but received an [object Undefined]

Properly spaced website images

Improving React Components with Material-UI Integration

What is the best way to extract the src attribute from an image tag nested within innerHtml?

What could be the reason for my ng-init not functioning properly?

An element in CSS that has a position of fixed and a width of 100% surpasses the dimensions of its

Tips for efficiently handling node-mysql database connections

Converting a JavaScript function to CoffeeScript, accepting jQuery's .map function and Selectors as parameters

Duplicate nodes_modules packages detected

Vue: Simple ways to retrieve state data in MutationAction

Creating pathways in AJAX with Rails

Is there a way to automatically load an entire Facebook profile in one go using a program?

"Using jQuery's animate() function to dynamically change text content

Every time I try to upload image files to cloudinary, I encounter this frustrating error message

Using Vue.js to submit a form in Laravel and redirecting with a flash message

Unable to copy and paste text in a TFX-CLI console using NPM

While Ajax POST is functional on desktop, it does not seem to work on Phonegap applications or Android