Send input value to node server in Express.js

Question

I am trying to add a product search functionality in my Node.js web shop project. I am using Express framework with MongoDB/mongoose. My idea is to load index page whenever a user clicks search icon (anchor HTML element), and in my router.get get all products from the database which titles match the user input.

Can someone tell me how to send that data to the server and retrieve it from req?

Relevant code from index.js:

router.get('/', function(req, res, next) {
    Product.find({ title: new RegExp(req.data) }, function(err, docs){
        var chunks = []; //rows in HTML page
        var chunkSize = 3; //No. of elemens in each row

        for (var i = 0; i < docs.length; i += chunkSize) {
            chunks.push(docs.slice(i, i + chunkSize));
        }

        res.render('shop/index', { title: 'Shopping Cart', products : chunks });
    });
});

Relevant code from header.hbs:

<ul class="nav navbar-nav navbar-right">
        <li>
          <form class="navbar-form navbar-left" role="search" id="search-input">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="Search">
            </div>
            <a href="/" class="btn btn-default"><i class="fa fa-search" aria-hidden="true"></i></a>
          </form>
        </li>

Is there a way to pass that input's data, say, something like this:

href ="/:search-input.val"

I know that is nonsense, but you should get what I'm aiming at... Any help would be much appreciated as I can't solve this for hours, nor find the answer here.

[EDIT] So, I added a jQuery handler in header.hbs, but it does nothing even though the Chrome console says that XHR request was successful. Any ides?

$('#search-btn').click(function() {
        var title = $('#search-input').val();

        $.ajax({
          type : 'GET',
          url: '?title=' + title,
          data : title
        });
      });

peteb · Accepted Answer · 2016-07-13 19:11:35Z

1

In Express, you can access GET data from the req.query property on your req object.

req.query is an object that contains the parsed values of a query string passed into your route (ie. /?field1=value). A query string is denoted by the ?. Multiple values in a query string are typically separated by an &

router.get('/', function(req, res, next) {
    var titles = req.query.titles

    Product.find({ title: new RegExp(titles) }, function(err, docs){
        var chunks = []; //rows in HTML page
        var chunkSize = 3; //No. of elemens in each row

        for (var i = 0; i < docs.length; i += chunkSize) {
            chunks.push(docs.slice(i, i + chunkSize));
        }

        res.render('shop/index', { title: 'Shopping Cart', products : chunks });
    });
});

You need to structure your AJAX call like this

 $.ajax({
  type : 'GET',
  url: '/'
  data : {
    title: title    
  }
});

This should produce a GET /?title=foo request.

edited Jul 13, 2016 at 19:11

answered Jul 13, 2016 at 18:22

peteb

19.6k9 gold badges58 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

dzenesiz Over a year ago

Thanks a lot! But how do I set it up in header.hbs? Some jQuery AJAX method?

peteb Over a year ago

Yes, you'll need to use jQuery/AJAX to accomplish the actual request if you're looking to get a dynamic value from the <input>.

dzenesiz Over a year ago

I tried with jQuery but no luck... I edited my question. If you have the time and are willing to help, I would be very thankful. And you helped much already.

peteb Over a year ago

You need to put a / before the query string.

peteb Over a year ago

@dzenesiz You need to write jQuery to insert the results as you'd like in your page.

|

Collectives™ on Stack Overflow

Send input value to node server in Express.js

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related