Confirm overwrite/delete? (appengine jinja2 python)

Question

I'm developing an app for production planning in a factory using appengine/jinja2 and am stuck with how to ask the user to confirm if the app should overwrite existing data or delete an entity in the NDB.

Maybe someone can suggest a course of action?

In product_edit.py I do the following (simplified):

RequestHandler
...
execute query and find given product
template_values = {
            'prod_id': query.prod_id,
            'prod_desc': query.prod_desc,                         
            }
template = JINJA_ENVIRONMENT.get_template('/html/product_edit.html')
self.response.write(template.render(template_values))

The product_edit.html file looks like below (I'm using w3.css).

...
<form class="w3-container" action="/products-save" method="post">
  <label class="w3-text-blue"><b>Product ID</b></label>
  <input value="{{prod_id}}" name="prod_id_txt" size="15" class="w3-input w3-border">
  <br>
  <label class="w3-text-blue"><b>Product Description</b></label>
  <input value="{{prod_desc}}" name="prod_(I'm using w3.css)desc_txt" size="50" 

  <input class="w3-btn w3-blue" type="submit" value="Save"> 
 </form>   

It populates two inputs with the product ID and description coming from the NDB and provides a "Save" button. The save invokes the appropriate request handler to write to the NDB. So I can overwrite the existing NDB entity, no probs.

But how can I ask the user to confirm before overwriting (or deleting) existing data?

In the product-save request handler I can of course display a page asking the user to confirm, but in doing this I lose the data from the original POST. One option would be to send the data to the new Jinja2 template via hidden fields, and upon user confirmation save the data from the hidden fields. However, this would not win a code beuty contest and is prone to coding errors. Is there anything more elegant I could do?

For the delete form I could do something with a pop-up to ask for confirmation, but I would like to use the same method as for the edit so that they are visually similar.

Thanks in advance!

Answer 1

There are many ways to accomplish this. The most straightforward way is to wire the form submit through a javascript function before submitting. Change:

<input class="w3-btn w3-blue" type="submit" value="Save"> 

to

<div id="saveWithConfirm">
    <input class="w3-btn w3-blue" type="button" value="Save" onclick="confirmOverwrite('ask');" /> 
</div>

then:

function confirmOverwrite(confirm) {
    confirmDiv = document.getElementById("saveWithConfirm");

    if ( confirm == "confirmed" ) {
        document.getElementById("ID-of-Form-Here").submit();

    } else if ( confirm == "ask" ) {
        //... if you need to check the database first, do an ajax call here...
        confirmDiv.innerHTML = '<input class="w3-btn w3-blue" type="button" value="No" onclick="confirmOverwrite(\'no\');" /><input class="w3-btn w3-blue" type="button" value="Yes" onclick="confirmOverwrite(\'confirmed\');" /> ';

    } else {
        confirmDiv.innerHTML = '<input class="w3-btn w3-blue" type="button" value="Save" onclick="confirmOverwrite(\'ask\');" />  ';

    }
}

This way, you never leave the form.