Converting JQuery ajax call to vanilla Javascript - Cannot POST /public/ error

Question

So this is a slight follow up to a question I had yesterday (Update HTML input value in node.js without changing pages), I'm attempting to submit a HTML form, send an ajax request to my server which supplies two numbers, these numbers are added on the server and then shown in a box on the same HTML page as the form. So far I received a solution in JQuery which was extremely useful, however my manager wants it done in javascript for various reasons. I've had a go so far, but as many people use JQuery for this, examples of a vanilla javascript method are few and far between. At present, on submission a page is thrown saying "Cannot POST /public/", I'm new to ajax so I'm reasonably sure the problem lies there.

My (working) JQuery code:

$(document).ready(function(){
  $("#add").submit(function(event){
    event.preventDefault();
    var num1 = $("#numa").val();
    var num2 = $("#numb").val();
    $.ajax({
      method: "post",
      url: '/add',
      data: JSON.stringify({ num1: num1, num2: num2 }),
      contentType: 'application/json',
      success: function(data){
        $("#answer").val(data);
      }
    })
  })
})

My attempt at converting to javascript:

function add(){
  var xml = new XMLHttpRequest();
  var num1 = document.getElementById("numa");
  var num2 = document.getElementById("numb");
  xml.open("POST", "/add", true);
  xml.setRequestHeader("Content-Type", "application/json");
  xml.onreadystatechange = function(){
    if(xml.readyState == XMLHttpRequest.DONE){
      document.getElementById("answer").value = xml.responseText;
    }
  }
  xml.send(JSON.stringify({num1: num1, num2: num2}));
}

My app.js:

var express = require('express');
var path = require('path');
var bodyParser = require('body-parser');
var app = express();

app.set('port', process.env.PORT || 8080);

app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());

app.use(express.static(path.join(__dirname, '../static')));

app.get('/', function(req, res){
  res.redirect('/public');
});

app.post('/add', function(req, res){
  var a = parseFloat(req.body.num1);
  var b = parseFloat(req.body.num2);
  var sum = a+ b;
  res.send(sum.toString());
});

var server = app.listen(app.get('port'), function(){
  var port = server.address().port;

});

For completion, my HTML form:

<form id="add" method="post">
  Number 1:
  <input type="number" id="numa" name="numa" step="any"/><br>
  Number 2:
  <input type="number" id="numb" name="numb" step="any"/><br>
  <input type="number" id="answer" name="answer" readonly/>
  <input type="submit" value="Submit" onclick="add()"/>
</form>

Any pointers would be great, thanks!

Use fetch

trincot
– trincot

2017-07-21 10:38:06 +00:00
Commented Jul 21, 2017 at 10:38 — trincot
– trincot, Commented Jul 21, 2017 at 10:38
youmightnotneedjquery.com

online Thomas
– online Thomas

2017-07-21 12:20:02 +00:00
Commented Jul 21, 2017 at 12:20 — online Thomas
– online Thomas, Commented Jul 21, 2017 at 12:20

Muhammad Imran · Accepted Answer · 2017-07-22 05:37:02Z

1

all looks good except the two lines:

var num1 = getElementById("numa");
var num2 = getElementById("numb");

it should be like this

var num1  = document.getElementById("numa");
var num2  = document.getElementById("numb");

Note: updated html code (added onsubmit in form and removed from button)

<form id="add" method="post" onsubmit="return add()">
  Number 1:
  <input type="number" id="numa" name="numa" step="any"/><br>
  Number 2:
  <input type="number" id="numb" name="numb" step="any"/><br>
  <input type="number" id="answer" name="answer" readonly/>
  <input type="submit" value="Submit"/>
</form>

edited Jul 22, 2017 at 5:37

answered Jul 21, 2017 at 10:56

Muhammad Imran

1517 bronze badges

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

6 Comments

Vicci Garner Over a year ago

Of course, silly mistake! Fixed that, but I'm still getting the same error?

Arthur Guiot Over a year ago

He also need to take the value of these elements

Muhammad Imran Over a year ago

ofcourse, you have to get values of the elements, i just gave hint this was the line where the error happens..

Vicci Garner Over a year ago

I've changed the syntax to be var num1 = document.getElementById("numa").value; and still the error is thrown

Muhammad Imran Over a year ago

If you're still having trouble, I found the source of your error, it is in your form tag also. When you click a button in form you're basically submitting form which is a normal form submit. since you have to handle it using javascript , please see my updated code above.

|

Collectives™ on Stack Overflow

Converting JQuery ajax call to vanilla Javascript - Cannot POST /public/ error

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related