How to create a pop-up confirmation message button href in Flask Jinja

Question

I have a Flask application and I want to create a button with a pop-up confirmation message before executing an action. Currently, the button is created using an anchor tag and a URL to call a Flask function with the HTTP DELETE method. However, I want to refactor the code to use just Flask functions and JavaScript to create the pop-up confirmation message.

In the current implementation, the anchor tag is used to call a Flask function with the HTTP DELETE method, which deletes the product with the given ID. The code for the anchor tag looks like this:

Delete

To create a pop-up confirmation message before deleting the product, I want to use JavaScript to create a confirm window. I have implemented the JavaScript code to create a confirm window, but I'm not sure how to integrate it with the Flask function to execute the delete action.

Here's the JavaScript code for creating a confirm window:

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  let text;
  if (confirm("Press a button!") == true) {
    text = "You pressed OK!";
  } else {
    text = "You canceled!";
  }
  document.getElementById("demo").innerHTML = text;
}

</script>

I want to refactor the code to use just Flask functions and create a pop-up confirmation message before calling the delete function. Can someone help me integrate the JavaScript code with the Flask function to create the desired behavior?

Answer 1

The solution

<a href="{{ url_for('productos.delete', id=producto.codprod) }}" onclick="return confirm('Are you sure?')">Delete</a>

and the button style

option 1

<a
  href="{{ url_for('productos.delete', id=producto.codprod) }}"
  onclick="return confirm('Are you sure?')"
  type="button"
  style="text-decoration: none;
    min-width: 100px; 
    max-height: 30px; 
    background-color: #224a64; 
    color: #fff;
    text-align: center; 
    border-radius: 6px; 
    cursor: pointer; 
    right: 0px;
  "
  >Eliminar
  </a>

option 2

<a href="{{ url_for('productos.delete', id=producto.codprod) }}" onclick="return confirm('Are you sure?')"><input type="button" value="Eliminar"></a>