How to send a JavaScript object along with an html form?

Question

I have an HTML form, which has quite a few input fields. As the user types in one of them, JavaScript generates a few objects that contain data I need to get to the server. I know I can send these objects with AJAX, but I need them to end up in the same function as the normal data from the form once they get server-side (I'm using flask for the backend). Is there any way I can send the objects along with the form, so that they somehow end up in the same place?

Here is the beginning of the form:

<form action="/org/new-task" method="post">
    <div class="mb-3">
        <select name="rep-type" class="form-select">
            <option selected disabled>Type of task</option>
            <option value="0">Ongoing/repeating</option>
            <option value="1">One-off</option>
        </select>
    </div>
    ...

and here is the output when I console.log() one of the objects (there are multiple, but they are very similar):

(2)?["painting", "cleaning"]

Answer 1

To have some objects sent with a "normal" form submit... You could store those in some hidden input elements as string.

You will have to parse that string on the python side. Look here for how

let some_object = {
  name: "John",
  last: "Doh"
}

// Stringify the object and store it in the hidden input
let hidden_input = document.querySelector("[name='js_object']")
hidden_input.value = JSON.stringify(some_object)

// Just for this demo... to console log something.
document.querySelector("form").addEventListener("submit", function(e){
  e.preventDefault()
  console.log(hidden_input.value)
  console.log(typeof(hidden_input.value))
})

<form>
  <input type="hidden" name="js_object">
  <button type="submit">Submit</button>
</form>