bachemap/templates/add_pin.html

    <form method="post" enctype="multipart/form-data" >
        <progress id="progress" hidden="true"></progress>
{% if form %}
        {{ form.hidden_tag() }}
        <!--<p>
            {{ form.description.label }}<br>
            {{ form.description(size=32) }}
        </p>-->
            
            {{ form.description.label }}
            {{ form.description }}
            {{ form.photo.label }}
            {{ form.photo() }}
            {{ form.typeofpin }}  
            <label>Coordenadas</label>      
            <div role="group">
                
                <input type="text" id="lat" name="lat" readonly>
                <input type="text" id="lng" name="lng" readonly>
            </div>
        <table style="background-color: rgba(0,0,0,0);">
            <tr style="background-color: transparent;">
                <td style="background-color:transparent">{{ form.submit() }}</td>
                <td style="background-color:transparent"><button style="background-color: red; color:white" id="cancel-add" type="button">Cancelar</button></td>
            </tr>
        </table>
        {% endif %}

    </form>
    <script>
        submitButton = document.getElementById('submit');
        if (submitButton) {
            submitButton.addEventListener('click', function() {
                // Disable the button after submission
                submitButton.disabled = true;
            });
        }
        document.getElementById('submit').onclick=function(e){
            document.getElementById('progress').hidden='false'
        }
    </script>