passing the clicked form to bootbox.confirm()

Question

I have a forms with submit , each form is to delete an object :

{% for person in persons %}
<form id='form'  name='delete'  action="{% url 'delete_person' person.id %}"
          method='POST'>

    {% csrf_token %}

    <button type='submit' onclick="bootbox.confirm();" id="del"  class='btn btn-xs btn-link icon'><i  class='glyphicon glyphicon-remove'></i></button>
</form>
{% endfor %}

when i click on the remove icon the corresponding person should be removed ,

I'm using bootbox.confirm() :

   <script type="text/javascript">
$(document).ready(function(){
$(".btn#del").click(function(e) {
    e.preventDefault();
    var lHref = $('form#form1').attr('action');
    bootbox.confirm("Are you sure?", function(confirmed) {
        if(confirmed) {
            window.location.href = lHref;
        }
    });
});
})
</script>

I'm getting the url of the form like below :

var lHref = $('form#form1').attr('action');
bootbox.confirm("Are you sure?", function(confirmed) {
if(confirmed) {
window.location.href = lHref; ...

the issue is that the first user in the form gets deleted regardless of which delete button I click, so I'm wondering how can I pass $(this) to bootbox.confirm() so I can get the right URL

Answer 1

instead of binding to id of button(which is multiple in your case so it will bind only first button's event) use form's submit event

also remove the onclick from you button

{% for person in persons %}
<form id='form'  name='delete'  action="{% url 'delete_person' person.id %}"
          method='POST'>

    {% csrf_token %}

    <button type='submit' id="del"  class='btn btn-xs btn-link icon'><i  class='glyphicon glyphicon-remove'></i></button>
</form>
{% endfor %}

in javascript

<script type="text/javascript">
$(document).ready(function(){
$("form").submit(function(e) {
    e.preventDefault();
    var lHref = $(this).attr('action');
    bootbox.confirm("Are you sure?", function(confirmed) {
        if(confirmed) {
            window.location.href = lHref;
        }
    });
});
})
</script>