Passing div elements to flask

Question

I have a div element that will be made up partially of text and partially of form data. I want to pass the div to flask. I know I can use request.form to get the form information on the backend. But I am not sure how to get the elements from the div that are not apart of the form.

<div id="schedule">
  <form action="generate" class="grid-container" enctype="multipart/form-data">
  {% for bunk in bunks %}
    {% set outer_loop = loop %}
    <div class="grid-item"> {{bunk.name}} </div>
      {% for _ in range(0, 7) %}
        {% if _ < 3 %}
           <input type="text" class="grid-item {{outer_loop.index-1}}{{_}}" name="{{outer_loop.index-1}} {{_}}"/>
        {% elif _ == 3 %}
           <div class="grid-item">Lunch</div>
        {% elif _ > 3 %}
          <input type="text"   class="grid-item {{outer_loop.index-1}}{{_-1}}" name=" 
          {{outer_loop.index-1}} {{_-1}}"/>
        {% endif %}
      {% endfor %}
    {% endfor %}                                                                                                                                                                                                     
  <input type="submit" name="data" value="generate"/>
  </form>

  <div class='activities'>
    {% for activity in activities %}                                                                                                                                                                                    
    <div id="{{activity.name}}" draggable="true" ondragstart=drag(event)> {{ activity.name }} </div>
    {% endfor %}                                                                                                                                                                                                 
  <div>                                                                                                                                                                                                        </div>

Answer 1

Set unique id for your div. Using jquery with ajax or any kind of javascript code that can perform a HTTP request to your flask backend.

In your fontend: example.html

<script>
let yourdiv = $("#yourdivId").html();
$.ajax({
    type: 'post',
    url: '/divinfo',
    data: JSON.stringify(yourdiv),
    contentType: "application/json; charset=utf-8",
    success: function (data) {
        console.log(data);
    }
});
</script>

In your flask code: controller.py

@app.route('/divinfo', methods=['POST'])
def get_divinfo():
   divinfo = flask.request.get_json()
   print(divinfo)
   return flask.jsonify({"result":f'ok'})