I currently have a 3 file setup to run on Nodejs: my server, a script for my pug file and a pug file. I want this line of code:

b1 Click on the button to open the dropdown menu.
  label(for="Monsters") Monsters
  select(name="Monsters", id="Mon") 
    option(value="Baal" name="F") Baal
    option(value="Diablo") Diablo
    option(value="Mephisto") Mephisto
    option(value="Duriel") Duriel
    option(value="Andarial") Andarial
label(for="DifficultyA") Difficulty
 select(name="Difficulty" id="DifA") 
    option(value="Normal") Normal
    option(value="Nightmare") Nightmare
    option(value="Hell") Hell
script(src="indexhandle.js")
 </br></br>


input(type="submit" value="Find Monster Drops" id="MonsterS").

To give me the selected option from both Monsters and DifficultyA. I do this by having my script do an XMLrequest (in indexhandle.js):

var xhttp
document.getElementById("MonsterS").addEventListener("click", function(){
    let name=document.getElementById("Mon").value;
    let Dif= document.getElementById("DifA").value;
    xhttp= new XMLHttpRequest()
    xhttp.open("POST", "/MonsterS", true)
    xhttp.setRequestHeader("Content-Type", "application/json; charset=UTF-8")
    xhttp.send(JSON.stringify({name:name, dif:Dif}))
})

which is read into my server with these calls:

app.post("/MonsterS",Monster_Search)
function Monster_Search(req, res, next){
    console.log("fsdfdsdffdsdfs")
    console.log(req.body.name)
    let name=req.body.name;
    let dif=req.body.dif;
}

However, Once it reaches Monster_Search, I keep getting errors on name and dif, saying the values are undefined. Checking every other are shows me that the values are defined just that, when it is sent to server, it appears to delete itself as trying to check req.body yields {}. Anyone know why this is happening?

I've installed Body-parser to help with pug request but i hasn't done anything. I've tried to use form to try and use that but it doesn't ever return to the server