How do i get the value of an html dropped item in Python?

Question

I'm trying to complete a project whereby a user can select various exercises from a dropdown menu and drag them to a series of boxes in order to create a workout. I'm supposed to use Python, Javascript and CSS in the project but i'm very new to this and i'm struggling.

My problem is that once the text has been dropped into the boxes, i need to access the values in order to display them on another page.

Here is my code:

<h2>Create Workout2</h2>

<script>
    function droppoint(event) {
        var data = event.dataTransfer.getData("Text");
        var nodeCopy = document.getElementById(data).cloneNode(true);
        nodeCopy.id = data; /* not sure about this part */
        event.target.appendChild(nodeCopy)
        event.preventDefault();
    }


    function allowDropOption(event) {
        event.preventDefault();
    }

    function dragpoint(event) {
        event.dataTransfer.setData("Text", event.target.id);
    }
</script>


<form action="/createworkout2" method="post">


    <div class="container text-center">
        <div class="row">


            <div class="col">
                <div class="dropdown">
                    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                        Cardio
                    </button>
                    <ul class="dropdown-menu" draggable="true" ondragstart="dragpoint(event)" >
                        {% for cardio in cardio %}

                        <li><a class="dropdown-item" draggable="true" value="{{ cardio.exercise }}" id="{{ cardio.exercise }}" ondragstart="dragpoint(event)">{{ cardio.exercise }}</a></li>
                        {% endfor %}
                    </ul>
                </div>
                <div class="dropdown">
                    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                        Tone
                    </button>
                    <ul class="dropdown-menu" draggable="true" ondragstart="dragpoint(event)" >
                        {% for tone in tone %}

                        <li><a class="dropdown-item" draggable="true" value="{{ tone.exercise }}" id="{{ tone.exercise }}" ondragstart="dragpoint(event)">{{ tone.exercise }}</a></li>
                        {% endfor %}
                    </ul>
                </div>
                <div class="dropdown">
                    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                        Bulk
                    </button>
                    <ul class="dropdown-menu" draggable="true" ondragstart="dragpoint(event)" >
                        {% for bulk in bulk %}

                        <li><a class="dropdown-item" draggable="true" value="{{ bulk.exercise }}" id="{{ bulk.exercise }}" ondragstart="dragpoint(event)">{{ bulk.exercise }}</a></li>
                        {% endfor %}
                    </ul>
                </div>
            </div>




            <div class="col">
                <div class="container" ondragstart="dragpoint(event)" draggable="true">

                    <div class="box" name="A" draggable="true" ondrop="droppoint(event)" ondragstart="dragpoint(event)" ondragover="allowDropOption(event)">A</div>
                    <div class="box" name="B" draggable="true" ondrop="droppoint(event)" ondragstart="dragpoint(event)" ondragover="allowDropOption(event)">B</div>
                    <div class="box" name="C" draggable="true" ondrop="droppoint(event)" ondragstart="dragpoint(event)" ondragover="allowDropOption(event)">C</div>
                    <div class="box" name="D" draggable="true" ondrop="droppoint(event)" ondragstart="dragpoint(event)" ondragover="allowDropOption(event)">D</div>
                    <div class="box" name="E" draggable="true" ondrop="droppoint(event)" ondragstart="dragpoint(event)" ondragover="allowDropOption(event)">E</div>
                    <div class="box" name="F" draggable="true" ondrop="droppoint(event)" ondragstart="dragpoint(event)" ondragover="allowDropOption(event)">F</div>
                    <div class="box" name="G" draggable="true" ondrop="droppoint(event)" ondragstart="dragpoint(event)" ondragover="allowDropOption(event)">G</div>
                    <div class="box" name="H" draggable="true" ondrop="droppoint(event)" ondragstart="dragpoint(event)" ondragover="allowDropOption(event)">H</div>


                </div>
            </div>





        </div>
      </div>

      <button class="btn btn-primary" type="submit">Confirm</button>



</form>

@app.route("/createworkout2", methods=["GET", "POST"])
@login_required
def createworkout2():
    """View and edit personal workouts"""

    cardio = db.execute("SELECT exercise FROM exercises WHERE type LIKE '%cardio%'")
    tone = db.execute("SELECT exercise FROM exercises WHERE type LIKE '%tone%'")
    bulk = db.execute("SELECT exercise FROM exercises WHERE type LIKE '%bulk%'")



    # User reached route via POST (as by submitting a form via POST)
    if request.method == "POST":


       

        activity1 = request.form.get("C")
        flash(activity1)


        return redirect("/")

    else:



        return render_template("createworkout2.html", cardio=cardio, tone=tone, bulk=bulk)

My Flash message just displays 'None'. I've tried Googling this but as i say, i'm very new to this and don't really understand a lot of what i'm reading!!

Any help would be greatly appreciated.

Andy

Answer 1

open up the browser inspection and look at network and you should see what you're posting in the network tab.

Forms will post your <input> fields but I can't see any of those in your html code. Form submission will not post the values in any <div>s.