node.js form handling post update and delete

Question

I am new to nodejs and am stuck. I've finished the server side code and all the APIs, now I have have to build forms to get the data and use the APIs I've built. I got lost in the tutorials in the internet. My APIs are in a folder called routes, for example first one is called addresses and here's the post add code:

var express = require('express');
var router = express.Router();
var Address   = require('../models/address');
var Student   = require('../models/student');


router.post('/add',function(req,res){

var language = req.body.language,
    country_id = req.body.country_id,
    city_id = req.body.city_id,
    pickup_points = req.body.pickup_points,
    static_address = req.body.static_address;
    student_id = req.body.student_id;

// if(student_id!=null && student_id != undefined){
//  res.json({success:false,message: "error one or more fields are empty"});
// }else{


    Student.findById(student_id,function(err,student){
    if(err) {res.json({success:false , message:"please enter a valid student Id"});
    }
    });
    req.assert('student_id', 'Invalid student id').notEmpty();
      errors = req.validationErrors();
     if (errors) {
     res.json({success:false,message:"please enter student ID " });

     }

    var newaddress = new Address({
        language : req.body.language != null
        || req.body.language !=undefined ? req.body.language : "",
        country_id : req.body.country_id != null
        || req.body.country_id !=undefined ? req.body.country_id : "",
            city_id : req.body.city_id != null
            || req.body.city_id !=undefined ? req.body.city_id : [],
        pickup_points : req.body.pickup_points != null
        || req.body.pickup_points !=undefined ? req.body.pickup_points : [],
            drop_points : req.body.drop_points != null &&
            req.body.drop_points !=undefined ? req.body.drop_points : [],
        static_address : req.body.static_address != null
        || req.body.static_address !=undefined ? req.body.static_address : {}
    });

// }
newaddress.save(function(err,address){
    if(err){
        console.log(err);
    }else{
        addAddress(req,res,address);
        res.json({success: true ,message: "address successfully added"});
    }
});
});


var addAddress =function (req, res, address) {

 var student_id = req.body.student_id;

Student.findById(student_id,function(err,student){
    if(err){
        console.log(err);
    }else{

        student.address = address._id;
        student.save(function(err,student){

            res.json({success : true , message : "address successfully added"     });
        });

    }


});

}

Then I made the html form:

<html>
           <body>
              <form action="/" method="post" enctype="multipart/form-data">
                 <fieldset>
                    <label for="language">Language:</label>
                    <input type="text" id="address" name="address" placeholder="Enter your language" />
                    <br />

                    <label for="country_id">country_id:</label>
                    <input type="country_id" id="country_id" name="country_id" placeholder="Enter your country_id " />
                    <br />

                    <label for="city_id">city_id:</label>
                    <input type="city_id" id="city_id" name="city_id" placeholder="Enter your city_id " />
                    <br />

                    <label for="pickup_points">pickup_points:</label>
                    <input type="pickup_points" id="pickup_points" name="pickup_points" placeholder="Enter your pickup_points " />
                    <br />

                    <label for="drop_points">drop_points:</label>
                    <input type="drop_points" id="drop_points" name="drop_points" placeholder="Enter your drop_points " />
                    <br />

                    <label for="static_address">static_address:</label>
                    <input type="static_address" id="static_address" name="static_address" placeholder="Enter your static_address " />
                    <br />

                    <input type="submit" value="Create Profile" />
                 </fieldset>
              </form>
           </body>
        </html>

The question is how do I connect the form to the API?

Answer 1

There are a couple issues here. You need to update the form to post to /add .

<form action="/add" method="post" enctype="multipart/form-data">

Next you need to get your express server running:

Replace your first 2 lines with:

var express = require('express');
var router = express();
router.use(express.static('public'));

Then at the bottom of the file, place

router.listen(3000);
console.log('Listening on port: 3000 -- Open http://localhost:3000');

Then create a folder called public and create an index.html file. Here you can copy the HTML written above into it. This means the server can serve your static HTML from http://localhost:3000 .

Finally since you are using a POST you need a body parser for express. I know that seems weird that you need an extra util to simply get the body but express leans towards light weight rather than do-all.

You can read the docs on body-parsing here: https://github.com/expressjs/body-parser

At that point you should be able to console.log the output to start working on the backend code.

node.js form handling post update and delete

Question

1 answers

solution1
2 2016-06-09 15:24:38

node.js form handling post update and delete

Question

1 answers

solution1 2 2016-06-09 15:24:38

solution1
2 2016-06-09 15:24:38