0

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>
2
  • Try to set the correct "action" value for your form (you put a space)
    – Benfarhat
    Commented Sep 7, 2017 at 0:46
  • @Benfarhat - Hey, Thanks for your comment! I am using forms for the first time.. could you please tell what is the value that should be given? Should it be ctrl1.js as I was reading it is where the data needs to be sent?
    – Dreams
    Commented Sep 7, 2017 at 0:49

2 Answers 2

2

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.

0
1

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;
})

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.