javascriptflaskpopupmessageconfirmation

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


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?


Solution

  • 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>