Tukukkk

I'm trying to build a web app that lets you drag/ create text boxes on a canvas, type in them, and save the value and location (left, top, width, and height style elements) of each text box for future use. I've built out the functionality to allow the drawing of text boxes (each are inputs with custom names that are dynamically added to canvas during onmouseup and onmousedown events).

Where I've gotten stuck is how to actually post/ send the data I need to a server. Traditional POST method, as I understand, does not send location/style data of the actual input boxes in a form, so I came up with the following code (located in index.html) to grab the data I want and create a JSON object to send to the server:

const handleFormSubmit = event => {



      const check = document.body.contains(document.getElementById('myForm'));

      if (check){

        const form = document.getElementById('myForm');

        const formToJSON = {};



        for (var i =0;i <form.length;i++)

        {

          formToJSON[form[i].name] = {"name": `${form[i].name}`, 

          "value": `${form[i].value}`, 

          "left": `${form[i].style.left}`, 

          "top": `${form[i].style.top}`, 

          "width": `${form[i].style.width}`, 

          "height": `${form[i].style.height}`}

        }









      const formStringified = JSON.stringify(formToJSON, null, "  ");



}

};

A sample of formStringified looks like this:

    {

  "answer1": {

    "name": "answer1",

    "value": "123",

    "left": "258px",

    "top": "374px",

    "width": "87px",

    "height": "32px"

  },

  "answer2": {

    "name": "answer2",

    "value": "asdf",

    "left": "472px",

    "top": "390px",

    "width": "97px",

    "height": "40px"

  }

}

where "answer1" and "answer2" are two different input text boxes (created dynamically as children in the same form).

This object is exactly what I want to be sent to the db, because it has all the info I need in the exact format, stringified in JSON. Then when I want to display the saved work for a certain user, I'd simply grab the corresponding data from db and dynamically place the input text boxes based on value, location, etc.

Currently the const handleFormSubmit is triggered by an onclick in a button (not submit) in index.html, but now I can't figure out how to proceed.

The majority of tutorials/ documentation I see online revolve around using bodyparser with a form that has method="POST" and corresponding app.post code grabbing req.body in the app.js file, but I don't know how/ if I can use this method to do what I need. I would be happy to do it that way but I want to be able to grab not only the form data, but the location data of the input text boxes as well (nested, of course, the same way as I am currently doing it). The other method I've seen is sending an httpRequest, but most tutorials I see say that this is not a safe method for production (although I haven't looked a whole lot into this method of it).

Is it possible to send the formStringified data straight to the db, or is that really dumb/ unsafe/ etc? Is there a way to grab the formStringified data and post it safely and properly, or perhaps is there a completely separate solution?

Any help/ advice steering this newb in the right direction would be greatly appreciated.