CODEWITHSUNDEEP
javascriptjquerydjangoajax
GXM100
GXM100

Reputation: 467

Remove 1 Form from Formset Dynamically Django

I am using the below to dynamically add a form to my formset:

.html

{{ form2.management_form }}
      <div id="form_set">
          {% for form2 in form2.forms %}
              <table class="table table2" width=100%>
                <tr>
                  <td width = 17.5%>{{form2.ProductCode}}</td>
                  <td width = 32.5%>{{form2.DescriptionOfGoods}}</td>
                  <td width = 12.5%>{{form2.UnitQty}}</td>
                  <td width = 12.5%>{{form2.Type}}</td>
                  <td width = 12.5%>{{form2.Price}}</td>
                  <td width = 12.5%>{{form2.Amount}}</td>
                </tr>
              </table>
          {% endfor %}
      </div>
      <button id="add_more" class="btn aqua-gradient">Add</button>
      <button id="delete" class="btn aqua-gradient">Delete</button>
      <div id="empty_form" style="display:none">
        <table class='table table2' width=100%>
          <tr>
            <td width = 17.5%>{{form2.empty_form.ProductCode}}</td>
            <td width = 32.5%>{{form2.empty_form.DescriptionOfGoods}}</td>
            <td width = 12.5%>{{form2.empty_form.UnitQty}}</td>
            <td width = 12.5%>{{form2.empty_form.Type}}</td>
            <td width = 12.5%>{{form2.empty_form.Price}}</td>
            <td width = 12.5%>{{form2.empty_form.Amount}}</td>
          </tr>
        </table>
      </div>

$('#add_more').click(function() {
        var counter=0;
        var form_count = $('#id_form-TOTAL_FORMS').val();
        counter++;
        $('#form_set').append($('#empty_form').html().replace(/__prefix__/g, form_count));
        $('#id_form-TOTAL_FORMS').val(parseInt(form_count) + 1);
    });

This works perfectly - however I need to be able to delete a line dynamically as well when the Delete button is clicked, and I'm struggling with working through the best way to do that. Any suggestions? I had tried this below - but of course that will only delete all forms and only if they are empty. I want to just delete one form at a time. I feel I may need to add a counter to the id above? Please any suggestions would be very useful.

$('#delete').click(function() {

        var form_idx = $('#id_form-TOTAL_FORMS').val();
        $('#form_set').empty($('#empty_form').html().replace(/__prefix__/g, form_idx));
        $('#id_form-TOTAL_FORMS').val(parseInt(form_idx) - 1);
    });

EDIT:

I am currently trying:

function removeForm(){
  this.parentElement.remove()
  var form_idx = $('#id_form-TOTAL_FORMS').val();
  $('#id_form-TOTAL_FORMS').val(parseInt(form_idx) - 1);
}

$('#add_more').click(function() {
  var btn = document.createElement("BUTTON");
  console.log(btn)
  $('#id_form-'+(form_count)+'-name')[0].parentElement.appendChild(btn)
  btn.innerHTML = "Remove";
  btn.onclick = removeForm


    var form_count = $('#id_form-TOTAL_FORMS').val();
    $('#form_set').append($('#empty_form').html().replace(/__prefix__/g, form_count));
    $('#id_form-TOTAL_FORMS').val(parseInt(form_count) + 1);

});

Upvotes: 1

Views: 482

Answers (1)

bb4L
bb4L

Reputation: 919

you can add a button to the form and then assing it a function to delete the form add the following to your #add_more function:

var btn = document.createElement("BUTTON");
$('#id_form-'+(form_count)+'-name')[0].parentElement.appendChild(btn)    
btn.innerHTML = "Remove";
btn.onclick = removeForm

and the removeForm function looks like:

function removeForm(){
    this.parentElement.remove()
    var form_idx = $('#id_form-TOTAL_FORMS').val();
    $('#id_form-TOTAL_FORMS').val(parseInt(form_idx) - 1);
}

EDIT:

$('#add_more').click(function() {
   var form_count = $('#id_form-TOTAL_FORMS').val();
   $('#form_set').append($('#empty_form').html().replace(/__prefix__/g, form_count));
   $('#id_form-TOTAL_FORMS').val(parseInt(form_count) + 1);
   var btn = document.createElement("BUTTON");
   $('#id_form-'+(form_count)+'-name')[0].parentElement.appendChild(btn)
   btn.innerHTML = "Remove";
   btn.onclick = removeForm
});

EDIT2 after solving the issue in chat:

the lines:

$('#id_form-'+(form_count)+'-name')[0].parentElement.appendChild(btn)

and 

this.parentElement.remove()

change significant depending on the structure of your html

the first is to select where to add the button to delete a form and the second is to find the form to delete...

Upvotes: 3

Related Questions