Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Marcelo Retana
Marcelo Retana
2,534 Points

I need help with some advanced code an a good programmer (JavaScript, NodeJS(ExpressJS), HTMl) I REALLY NEED YOUR HELP

I am using JavaScript / NodeJS to do this project, I am now in the last part of my project, I need to explain this very well for you to understand, my boys.

I need to use the POST METHOD on this html code

<form role="form"
 <div class="form-group">
    <label for="inputNombreEvento">Nombre del Evento</label>
       <input type="text" class="form-control" id="inputNombreEvento" placeholder=""></div>
           <div class="form-group">
              <label for="inputInformacion">Información</label>
                  <textarea class="form-control" rows="3"></textarea>
                      </div>
                        <div class="form-group no-margin">
                            <label for="inputLocacion">Dónde?</label>
                            <input type="text" class="form-control" id="inputLocacion" placeholder="">
                        </div>
                        <div class="map-container-modal">
                            <div id="map-canvas"></div>
                        </div>
                        <div class="date-time-container">
                            <div class="container datetimer-label-container">
                                <div class="row">
                                    <div class="col-md-3"><label>De:</label></div>
                                    <div class="col-md-3"><label>A las:</label></div>
                                    <div class="col-md-3"><label>Hasta la(s):</label></div>
                                    <div class="col-md-3"><label>Del:</label></div>
                                </div>
                            </div>
                            <div class="container datetimer-input-container-group">
                                <div class="row ">
                                    <div class="col-md-3 datetimer-input-container-col">
                                        <input type="text" class="date start" />
                                        <span class="didi-calendar-ico start"></span>
                                    </div>
                                    <div class="col-md-3 datetimer-input-container-col">
                                        <input type="text" class="time start" />
                                  <span class="didi-chevron"></span>
                              </div>
                            <div class="col-md-3 datetimer-input-container-col">
                              <input type="text" class="time end" />
                        </div>
                      <div class="col-md-3 datetimer-input-container-col">
                    <input type="text" class="date end" />
                  <span class="didi-calendar-ico end"></span>
                </div>
              </div>
            </div>
         </div>
       <div class="button-container">
     <button type="submit" class="btn btn-primary cancel-btn pull-left">Cancelar</button>
   <button type="submit" class="btn btn-primary accept-btn pull-right">Aceptar</button
 </div>
</form>

I have here the hackst example:

http://hackst.com/#Kz623

LOOK AT THIS:

I have this JavaScript that I did for the Log In page, what I need to do now is similar?

var Client = require("node-rest-client").Client;

var client = new Client();

/* GET home page monitors*/ 
var index = function(req, res) {
    res.render('login', { title: '' });
};

var authenticate = function(req, res) {

    var args = {
      headers:{"Content-Type": "application/json"}
    };

    client.post("http://diditserver.webfactional.com/idid2/login?login="+ req.body.login.user +"&password="+ req.body.login.password, args, function(data, response) {
        var response = JSON.parse(data);
        if (response.success) {
            res.redirect("/");
        }
        else {
            res.render("login", {success: false} );
        }
    });
};

exports.authenticate = authenticate;
exports.index = index;

With this on the routes folder:

app.post("/login", login.authenticate);

Do you understand? I have all the information about the project so if you need to know something else just let me know, as well I accept help via Skype add me as maketroli

The JavaScript that I place here is just an example of a code that I did for the log in page.

1 Answer

Matthew Ludwigs
Matthew Ludwigs
11,197 Points

Hey Marcelo,

I am not familiar with node-rest-client, but it appears that your first html form tag is missing somethings. I think it needs a method attribute with a value of POST, and it needs to be closed. For example:

<form method="POST" action="some/path" >

Also in your node code, on your client.post method you use req.body.login.use. Again I am not familiar with node-rest-client, but I believe req.body is from a node module call body-parser that is used with express, but I am sure that is some middleware that can handle the req content for node-rest-client.

With express and body-parser it is quite easy to get that data, for example:

var express = require("express"),
    bodyParser = require("body-parser"),
    app = express();

// Tell your express app to use the middleware
app.use(bodyParser());

// set static files to be served from the public directory
app.use(express.static(__dirname + '/public'));

// GET request for html that responds with your html file with the form on it
app.get("/", function (req, res) {
  res.send("form.html");
});

// Simple post route
app.post("/postroute", function (req, res) {
   console.log(req.body.login.user);
   console.log(req.body.login.password);
});

app.listen(9778);
console.log("Go to localhost:9778");

I am sure that is a better way while using express as well to get that data. However you could just get the data from the native node code parse the data and set it in an object, for example:

var http = require("http");

http.createServer(function (req, res) {

// set up a way to server your html with the form on it then make the post logic

// POST logic:
 if (req.method === "POST") {
  // Set empty obj for us to use later
  var obj = {};

  // Use node's .on event method to trigger when we get the data from the post request
 req.on("data", function (chunk) {

// the chunk of data we get back is a buffer so we need to make it a string
 var strChunk = chunk.toString();

/* if strChunk looks like: user=Bill&password=BillPass, want use the split method and return an array that looks like: ["user=Bill", "password=BillPass"] */
 var chunkArray = strChunk.split("&");

// then we will forEach on the array and take out the = sign and set the values in our object
// I don't really for each used very often, but for simplicity I am going to use it
chunkArray.forEach(function (string) {

/* if our string looks like 'user=Bill', want split it on the = sign so we get an array called s that looks like ['user','Bill'], and same process for */
  var s = string.split("=");

/* Since s in array we can use indexes to get the data in it, so s[0] will equal 'user' and s[1] will equal 'Bill', so the code below makes the obj have the name value pair of user: 'Bill' to it would look more like { user: "Bill" } */
  obj[s[0]] = s[1];

// Check to see what obj is it should look like: { user: "Bill", password: "BillPass" }
console.log(obj);
res.end();
});
 }

 }
}).listen(9778);
console.log("Go to localhost:9778");

Since native node is long winded many users use modules like you are trying to use in order to get access to that data, but I think body is part of body-parser for express. However, I can be wrong. Hopefully some of this can help point you in the right direction, but I think it would be good to start with adding the method attribute with a value of "POST" on your first form tag and see what happens. I say this also because in your hack link the http request has a content length property of 0, which could possibly mean that your request is sending no data, but I could be wrong. If you need more information let me know, and I am sure others here have great knowledge in Node and they can help, probably even better then me.

note: hopefully I didn't miss any semicolons, parenthesis, or curly braces, sorry in advance if I did.

Marcelo Retana
Marcelo Retana
2,534 Points

I did everything as you told me, IT WAS PERFECT but at the beginning I got frustrated because there was an error message CANNOT POST/ then at the end I talked to the client and he told me that they were applying some changes on the API and then tomorrow I have to go ahead again but I have already the 90 % of the project done. Maybe I will be asking some questions again, I am very thankful with you my friend, I would like to pay you or give a beer hahaha THANKS

Matthew Ludwigs
Matthew Ludwigs
11,197 Points

I glad it mostly worked, I was hoping that I could help (I didn't test the code on my machine, so I was nervous on what would actually work). On the CANNOT POST/ message try making sure your action attribute on your form and the path in the app.post are the same. For example:

Form

<form method="POST" action="/postworked">

Express server Post method

// Above code that sets get route to form and app.use for both static directory and body-parser

app.post("/postworked", function (req, res){
  console.log(req.body.login.user);
  console.log(req.body.login.password);
});

// The rest of your express server code

I am not 100% sure if that will work, but I think it might, or at least it is the only that I can think of off the top of my head. I would also recommend, which I think you said you did in your original post, is to put all your routes in their own module which then you require them in your server file (but that is just a side note). And no problem, I am just happy I was able to help. I will drink a beer in honor of the beer you want to give me!