CODEWITHSUNDEEP
javascripthtmlformsflaskpopup
AnthoGr
AnthoGr

Reputation: 45

Html form (popup) with javascript and flask

I'm trying to create a simple todo flask app. It is linked with a database with columns id, content(task) and status(todo, progress, done). I added features like add a new task, delete it and update its status with buttons.

I'm trying to add an "edit task" button trough a popup form. I used a mix of html/css/javascript to display this popup and it works well but I'm encountering an issue with the Jinja call (see below).

In the html there is a for loop to display all the tasks and next to each task there are buttons to update task status, edit task and delete them (see figure below)

enter image description here

Here is the html

{% for task in tasks %}
            <div class="flex-row">
                <p class="task">{{ task.content }}</p>

                <!--Update task status option-->
                <form action="{{ url_for('update_task_status', task_id=task.id) }}" method="POST">
                    <button type="submit" class="btn-{{ task.status }}">{{ task.status }}</button>
                </form>

                <!-- Edit task option-->
                <button class="btn-edit" onclick="openForm()"><i class="fa fa-edit"></i></button>
                <div class="form-popup" id="myForm">
                    <form action="{{ url_for('edit_task', task_id=task.id) }}" class="form-container" method="POST">
                        <label for="Task_edit"><b>Edit task</b></label>
                        <input type="text" value="{{ task.content }}" name="Task_edit" required>
                        <button type="submit" class="btn">Edit</button>
                        <button type="button" class="btn cancel" onclick="closeForm()">Close</button>
                    </form>
                </div>

                <!-- Delete task option-->
                <form action="{{ url_for('delete_task', task_id=task.id) }}" method="POST" onsubmit="return confirmDelete()">
                    <button type="submit" class="btn-delete"><i class="fa fa-trash"></i></button>
                </form>
            </div>
            <hr class="line">
{% endfor %}

Javascript:

function openForm() {
   document.getElementById("myForm").style.display = "block";
}

function closeForm() {
   document.getElementById("myForm").style.display = "none";
}

css:

/* The popup form - hidden by default */
.form-popup {
  display: none;
  ...
}

Everything works well except in the "edit task option" (section in the html) where the {{ task.id }} Jinja call does refer only to the 1st task whatever the edit button I'm clicking on.

I don't understand because it works for the delete button (clicking on the delete button of task 2 will give task.id = 2). I suspect the javascript function interacting with the html and preventing Jinja to get the right task id and I don't know how to sort that out ?

I know how to do this "edit task" option by routing flask to another html page but I would like to do it with this popup form.

Anyone could help me ?

Thanks a lot !

Upvotes: 1

Views: 2360

Answers (1)

Detlef
Detlef

Reputation: 8552

I think you have multiple items with the same id. Your javascript function always opens the first hit. So it is always the form for the first entry.

My suggestion is to include the task id in the identification. Then each element has a unique id and can be uniquely referenced.

<button onclick="openForm(event)" data-target="#form-{{ task.id }}"><i class="fa fa-edit"></i></button>
<div class="form-popup" id="form-{{ task.id }}">
  <form>
    <!-- ... -->
    <button type="button" onclick="closeForm(event)" data-dismiss=".form-popup">Close</button>
  </form>
</div>

function openForm(event) {
  const target = event.target.dataset.target;
  const elem = document.querySelector(target);
  elem && (elem.style.display = 'block');
}

function closeForm(event) {
  const target = event.target.dataset.dismiss;
  const elem = event.target.closest(target);
  elem && (elem.style.display = 'none');
}

Upvotes: 1

Related Questions