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