如何从单个 HTML 按钮同时执行 JavaScript 和 Django？

Question

My end-goal is to process my Django view when a button is clicked (to save database info), as well as executing some JavaScript (to display a bootstrap success alert). However, the bug or potential limitation I'm encountering is that I can only do one or the other. I confirmed this to true by simply removing the onclick="somefunction()" parameter from the button element. If it's removed, the response is "posted" successfully to my Django view. If it's kept, only the JavaScript function is executed.

Here is my code:

HTML:

{% csrf_token %}
<form method="POST" class="form_group">
  <!-- ...some unrelated bootstrap stuff -->
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal" id="cancel-button-id">Cancel</button>
    <button type="submit" class="btn btn-primary" onclick="indicate_if_successful()" id="save-customer-button-id" name="save_customer" value="save_customer">Save customer info</button>
    <!-- The button above is the one having issues -->
  </div>
</form>

Django view

def add(response):  # This function doesn't get executed if 'onclick' exists

    if response.method == "POST":  
        if response.POST.get("save_customer"):
            pass  # The code I want to execute

So in order to execute both the JavaScript function and Django view, what are my options? Should I be doing all of this differently in the first place? I'm open to any alternative.

Answer 1

onclick="somefunction()" added some lock on your btn. You can use document.getElementById('save-customer-button-id').addEventListener('click', function(e){...}) , then in function body write code to alert and default behavior(send a form).

But, i think, it will so fast, that user may not see it.

Answer 2

your javascript indicate_if_successful() function should return true after it is executed therefore it will run first and after it's completion the form will be submitted also it's better to use onsubmit event for form tag here

<form method="POST" class="form_group" onsubmit="indicate_if_successful()">

</form>