“Cannot POST /” when I try to click a submit button in HTML - html

Question

I have seen similar questions, but am unable to understand the mistake and the way around.
I have a basic mean stack application. I have a submit button, where if I click, it throws me an error saying in the browser saying :
Cannot POST /
Although, the post request has gone to the server and it gets updated in my database. I just want the browser to come back to the previous page after I click submit and post request is done!
The browser console also shows an error saying:
POST http://localhost:3000/ 404 (Not Found)
Here are my files for reference ctrl1.js:
var app = angular.module('myApp', []);
app.controller('myCtrl',['$scope', '$http', function($scope, $http) {
console.log("Hello from controller");
$scope.application = {};
var refresh = function(){
$http.get('/applicationList').then(function(response){
console.log("I got the applications I requested");
$scope.applicationList = response.data;
// $scope.contact = null;
});
};
refresh();
$scope.saveApplication = function(){
console.log($scope.application);
$scope.application.state = "saved";
$http.post('/applicationList', $scope.application).then(function(response){
console.log(response);
//refresh();
});
};
$scope.submitApplication = function(){
console.log("reached here");
console.log($scope.application);
console.log("reached here");
$scope.application.state = "submit";
$http.post('/applicationList', $scope.application).then(function(response){
console.log(response);
refresh();
});
};
$scope.remove = function(id){
console.log(id);
$http.delete('/applicationlist/'+id).then(function(response){
refresh();
});
};
$scope.edit = function(id){
console.log(id);
$http.get('/applicationlist/'+id).then(function(response){
$scope.application = response.data;
//refresh();
});
};
$scope.update = function(){
console.log($scope.application._id);
$http.put('/applicationlist/' + $scope.application._id, $scope.application).then(function(response){
//$scope.contact = response.data;
refresh();
});
};
// $scope.clear = function(){
// $scope.application = "";
// };
//Universities
$scope.application.selectname1={};
$scope.application.selectname2={};
$scope.application.selectname3={};
$scope.filter1 = function(item){
return (!($scope.application.selectname1&&$scope.application.selectname1.id)||item.id !=$scope.application.selectname1.id||item.id==100);
};
$scope.filter2 = function(item){
return (!($scope.application.selectname2&&$scope.application.selectname2.id)||item.id!=$scope.application.selectname2.id||item.id==100);
};
$scope.filter3 = function(item){
return (!($scope.application.selectname3&&$scope.application.selectname3.id)||item.id !=$scope.application.selectname3.id||item.id==100);
};
$scope.universities = [
{
id:1,
name: 'IITs'
},
{
id:2,
name: 'IIITs'
},
{
id:3,
name: 'BITS'
},
{
id:100,
name: 'None'
}
];
//Degrees
$scope.application.selectdegree1={};
$scope.application.selectdegree2={};
$scope.application.selectdegree3={};
$scope.filterDegree1 = function(item){
return (!($scope.application.selectdegree1&&$scope.application.selectdegree1.id)||item.id !=$scope.application.selectdegree1.id||item.id==100);
};
$scope.filterDegree2 = function(item){
return (!($scope.application.selectdegree2&&$scope.application.selectdegree2.id)||item.id!=$scope.application.selectdegree2.id||item.id==100);
};
$scope.filterDegree3 = function(item){
return (!($scope.application.selectdegree3&&$scope.application.selectdegree3.id)||item.id !=$scope.application.selectdegree3.id||item.id==100);
};
$scope.degrees = [
{
id:1,
name: 'PhD'
},
{
id:2,
name: 'Masters'
},
{
id:3,
name: 'BTech'
},
{
id:100,
name: 'None'
}
];
$scope.check = function(evt,cityName)
{
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
return true;
}
}]);
Server.js :
var express = require('express');
var app = express();
var mongojs = require('mongojs');
var db = mongojs('internapplications', ['internforms']);
var assert = require('assert');
var bodyParser = require('body-parser');
var request = require('request');
app.use(express.static(__dirname + "/public"));
app.use(bodyParser.json());
app.get('/applicationList', function(req, res){
console.log("I received a get request");
db.internforms.find(function(err, docs){
console.log(docs);
res.json(docs);
});
});
app.post('/applicationList', function(req, res){
console.log("I received a post request");
console.log(req.body);
db.internforms.insert(req.body, function(err,doc){
res.json(doc);
});
});
app.delete('/applicationList/:id', function(req,res){
console.log("reached here");
var id = req.params.id;
console.log(id);
db.internforms.remove({_id: mongojs.ObjectId(id)}, function(err,doc){
res.json(doc);
});
});
app.put('/applicationList/:id', function(req,res){
var id = req.params.id;
console.log(req.body.name);
db.internforms.findAndModify({query: {_id: mongojs.ObjectId(id)},
update: {$set: {name: req.body.name, email: req.body.email, number: req.body.number}},
new: true},
function(err,doc){
res.json(doc);
});
});
app.listen(3000);
console.log("Server running at port 3000");
And my html looks like this :
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<!-- Latest compiled and minified CSS - loading at the top, since we want stylesheets to load up as soon as the page comes up -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link href="css/index.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="controllers/ctrl1.js"></script>
<title>Intern Applications App</title>
</head>
<body ng-controller="myCtrl">
<div class="container">
<nav id="tab-navigation">
<a href ng-click="check(event, 'page1')" id="defaultOpen">Applications Form</a>
<a href ng-click="check(event, 'page2')" >Application List</a>
</nav>
<div class="tabcontent" id="page1">
<form class="well form-horizontal" action=" " method="post" id="contact_form">
<!-- <fieldset> -->
<!-- Form Name -->
<legend>Intern Application Form</legend>
<div class="form-group">
<label class="col-md-4 control-label">Project Title</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea class="form-control" name="comment" placeholder="Project Title" ng-model="application.title" ></textarea>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Project Description</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea class="form-control" name="comment" ng-model="application.description" placeholder="Project Description" ></textarea>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Approach</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea class="form-control" name="comment" ng-model="application.approach" placeholder="Approach" ></textarea>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Is the dataset available?</label>
<div class="col-md-4">
<div class="radio">
<label>
<input type="radio" id="yes" name="dataset" value="yes" ng-model="application.isData"/> Yes
</label>
</div>
<div class="radio">
<label>
<input type="radio" id="no" name="dataset" value="no" ng-model="application.isData"/> No
</label>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group" ng-show="application.isData == 'no'">
<label class="col-md-4 control-label">Approach for Data Collection</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<input name="first_name" ng-model="application.dataDescription" placeholder="Approach" class="form-control" type="text">
</div>
</div>
</div>
<div class="form-group" ng-show="application.isData == 'yes'">
<label class="col-md-4 control-label">Data Available at</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<input name="first_name" placeholder="Approach" class="form-control" type="text">
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Impact</label>
<div class="col-md-4 inputGroupContainer">
<div class="checkbox">
<label>
<input type="checkbox" id="yes" value="Technical" ng-model="application.technical"/> Technical
</label>
<label>
<input type="checkbox" id="yes" value="Business" ng-model="application.business"/> Business
</label>
</div>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label">Number of Interns</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<input name="first_name" placeholder="Number" ng-model="application.numberOfInterns" class="form-control" type="text" >
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Skill Set </label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea class="form-control" name="comment" ng-model="application.skillSet" placeholder="Skill Set " ></textarea>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">University Preference</label>
<div class="col-md-4 inputGroupContainer">
<!-- <div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea class="form-control" name="comment" ng-model="application.skillSet" placeholder="Skill Set " ></textarea>
</div> -->
<div class="input-group">
<select ng-model="application.selectname1"
ng-options="item as item.name for item in universities|filter:filter2|filter:filter3" ><option value="">- select -</option>
</select>
<select ng-model="application.selectname2"
ng-options="item as item.name for item in universities|filter:filter1|filter:filter3" ><option value="">- select -</option>
</select>
<select ng-model="application.selectname3" ng-options="item as item.name for item in universities|filter:filter1|filter:filter2" ><option value="">- select -</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Other Comments</label>
<div class="col-md-4 inputGroupContainer">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
<textarea class="form-control" name="comment" ng-model="application.comments" placeholder="Comments"></textarea>
</div>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-2">
<button type="submit" class="btn btn-primary" ng-click="submitApplication()"> Submit <span class="glyphicon glyphicon-send"></span></button>
</div>
<div>
<button type="submit" class="btn btn-warning" ng-click="saveApplication()"> Save <span class="glyphicon glyphicon-floppy-disk"></span></button>
</div>
</div>
<!-- </fieldset> -->
</form>
</div>
<div class="tabcontent" id="page2" style="display: none;">
<table class="table">
<thead>
<tr>
<th>Project Title</th>
<th>Project Description</th>
<th>State</th>
<th></th>
</tr>
<tbody>
<tr ng-repeat="apllication in applicationList">
<td>{{application.title}}</td>
<td>{{application.description}}</td>
<td>{{application.state}}</td>
<td><button class="btn btn-danger" ng-click="remove(application._id)" ng-show="application.state='saved'">Delete</button></td>
<td><button class="btn btn-warning" ng-click="edit(application._id)" ng-show="application.state='saved'">Edit</button></td>
</tr>
</tbody>
</thead>
</div>
</div>
</body>
</html>

Answer 1

Your database gets updated because you have attached an ng-click directive to the submit button, which is correctly hitting your /applicationList route with a POST: that's good.
At the same time, your button is inside a form element and is of type submit, which means clicking it will trigger the form action. Because you have left the form action empty - action=" " - you are also hitting the non-existent / route. That's why you get your error.
A simple fix is to change your button types to button so that they don't trigger the form action, and remove the action attribute from the form.

Answer 2

you are trying to get '/' for this plealse write this code in
server.js
app.get('/', function(req, res) {
res.end('Welcome to api');
return;
})