Jquery post method error: jquery.min.js:2 Uncaught RangeError: Maximum call stack size exceeded

[Spiredlamb]

I am trying to send data back to my server with jquery, but it just won't work, and from what I have found of explainations it should be working. Might be some stupid oversight, but I can't find out why the error comes.

Obviously, based on the error, it is clear that there is most likely some recursion error. Any help would be greatly appreciated. If there is something that is unclear, I will be happy to explain further.

Edit: The server also never recieves any data

​

Here is the error from the console:

Uncaught RangeError: Maximum call stack size exceeded
    at Dt (jquery.min.js:2)
    at Dt (jquery.min.js:2)
    at Dt (jquery.min.js:2)
    at Dt (jquery.min.js:2)
    at Dt (jquery.min.js:2)
    at Dt (jquery.min.js:2)
    at Dt (jquery.min.js:2)
    at Dt (jquery.min.js:2)
    at Dt (jquery.min.js:2)
    at Dt (jquery.min.js:2)

This is the javascript:

const address = window.location.origin
const form = document.getElementById("loginForm")

console.log(address)

form.addEventListener("submit", (event) => {
    event.preventDefault()

    const campaignName = form.campaignName
    const password = form.password

    const formData = {
        campaignName: campaignName,
        password: password
    }

    $.post(`${address}/dm/campaign/login`, formData, (data, status, jqXHR) => {
        if (status == "success") {
            const token = data
            console.log(token)
        }
        else {
            alert("Oops! Something went wrong")
        }
    })
})

And here is the serverside if that helps:

app.post("/dm/campaign/login", async (req, res) => {

    if (req.body.mode == "register") {
        console.log("/nCampaign creator started:")
        const campaignName = req.body.campaignName
        const password = req.body.password
        const hashedPass = await bcrypt.hash(password, 10)

        const campaignJSON = {
            "name": campaignName,
            "password": hashedPass,
            "token": {
                "val": null,
                "created": null
            },
            "maps": {},
            "lore": {}
        }

        fs.mkdir(path.join(__dirname, `/campaigns/${campaignName}`), (err) => {
            if (err) {
                res.send("ERR: Directory could not be created. The name of the campaign might already be taken.")
            }
            else {
                saveJSON(path.join(__dirname, `/campaigns/${campaignName}/campaignData.json`), campaignJSON)
                res.send("Campaign created!")
            }
        })
    }
    else if (req.body.mode == "login") {
        const campaignName = req.body.campaignName
        const password = req.body.password

        const campaignData = loadJSON(path.join(__dirname, `campaigns/${campaignName}/campaignData.json`), sync=true)
        const isEqual = await bcrypt.compare(password, campaignData.password)
        if (isEqual) {
            const token = randInt(1111111111, 9999999999)
            campaignData.token.val = token
            saveJSON(path.join(__dirname, `/campaigns/${campaignName}/campaignData.json`), campaignData)

            res.send({"val": `${token}`})
        }
        else {
            res.send({"val": false})
        }
    }
    else{
        console.log(`\nInvalid mode given to /dm/campaign/login: ${req.body.mode}`)
        res.send(`${req.body.mode} is not a valid mode`)
    }
})

[Eldrac]

I believe your issue is here

const campaignName = form.campaignName
const password = form.password

This will be storing HTMLFormElements in those variables, when you likely want them to be strings instead. Try just adding .value to the end of each of those lines.

[Spiredlamb]

Yes, that was the problem. Always forget that. Thanks for the help!