How to "add another row" in Django on change input

Question

I am using TabularInline formset in admin view with extra=1 to have only a row of formset. I wish to automatically add a row (like when I click on "add another row") when a row is filled, that means using "on change". To do that I tried to intercepet onChange input overwriting change_form.html in this way:

$(document).on('change', '#productinstance_set-group .field-product select', function () {
    // test
    console.log("changed!");
    // I tried this
    $('#productinstance_set-group tbody tr.add-row').formset();
    // and this
    $('#productinstance_set-group tbody tr.add-row').click();
    // and this
    $("#productinstance_set-group .tabular.inline-related tbody tr").click();
    // and this
    $("#productinstance_set-group .tabular.inline-related tbody tr").formset();
});

but don't work

EDIT:

This is the formset HTML:
  <table>
     <thead><tr>
       <th class="original"></th>  
         <th class="column-product required">product
         
         </th>
      
         <th class="column-cost required">cost
         &nbsp;<img src="/static/admin/img/icon-unknown.svg" class="help help-tooltip" alt="(type price for product)" title="type price for product" width="10" height="10">
         </th>

         <th class="column-quantity required">Quantity
         &nbsp;<img src="/static/admin/img/icon-unknown.svg" class="help help-tooltip" alt="(quantity of products)" title="quantity of products" width="10" height="10">
         </th>
         <th class="column-Operator required">Operator
         
         </th>
     <th>Deletere?</th>
     </tr></thead>

     <tbody>
        <tr class="form-row row1 dynamic-productinstance_set" id="productinstance_set-0">
        <td class="original">
          
          <input type="hidden" name="productinstance_set-0-id" id="id_productinstance_set-0-id">
          <input type="hidden" name="productinstance_set-0-archive" id="id_productinstance_set-0-archive">
          
        </td>
              <td class="field-product">
                  <div class="related-widget-wrapper">
    <select name="productinstance_set-0-product" data-minimum-input-length="3" data-placeholder="type name of product" id="id_productinstance_set-0-product" data-autocomplete-light-language="en" data-autocomplete-light-url="/product-autocomplete/" data-autocomplete-light-function="select2" tabindex="-1" class="select2-hidden-accessible" aria-hidden="true">
  <option value="" selected="">---------</option>

</select><span class="select2 select2-container select2-container--default" dir="ltr" style="width: 70.9167px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-id_productinstance_set-0-product-container"><span class="select2-selection__rendered" id="select2-id_productinstance_set-0-product-container"><span class="select2-selection__placeholder">type name of product</span></span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span><div style="display:none" class="dal-forward-conf" id="dal-forward-conf-for_id_productinstance_set-0-product"><script type="text/dal-forward-conf">[{"type": "const", "val": "nome", "dst": "q_field"}]</script></div>
    
        <a class="related-widget-wrapper-link change-related" id="change_id_productinstance_set-0-product" data-href-template="/admin/archiverio/product/__fk__/change/?_to_field=id&amp;_popup=1" title="Edit product"><img src="/static/admin/img/icon-changelink.svg" alt="Edit"></a><a class="related-widget-wrapper-link add-related" id="add_id_productinstance_set-0-product" href="/admin/archiverio/product/add/?_to_field=id&amp;_popup=1" title="Add another product"><img src="/static/admin/img/icon-addlink.svg" alt="Add"></a><a class="related-widget-wrapper-link delete-related" id="delete_id_productinstance_set-0-product" data-href-template="/admin/archiverio/product/__fk__/delete/?_to_field=id&amp;_popup=1" title="Delete product"><img src="/static/admin/img/icon-deletelink.svg" alt="Delete"></a>
    
</div>
              </td>
              
              <td class="field-cost">
              
                  
                  <input type="number" name="productinstance_set-0-cost" step="0.01" id="id_productinstance_set-0-cost">
              
              </td>
              
              <td class="field-quantity">
                  
                  <input type="number" name="productinstance_set-0-quantity" class="vIntegerField" id="id_productinstance_set-0-quantity">
              
              </td>
              
              <td class="field-Operator">

                  <div class="related-widget-wrapper">
    <select name="productinstance_set-0-Operator" id="id_productinstance_set-0-Operator">
  <option value="" selected="">---------</option>

  <option value="1">admin</option>

  <option value="2">test</option>

</select>
    
        <a class="related-widget-wrapper-link change-related" id="change_id_productinstance_set-0-Operator" data-href-template="/admin/auth/user/__fk__/change/?_to_field=id&amp;_popup=1" title="Edit user"><img src="/static/admin/img/icon-changelink.svg" alt="Edit"></a><a class="related-widget-wrapper-link add-related" id="add_id_productinstance_set-0-Operator" href="/admin/auth/user/add/?_to_field=id&amp;_popup=1" title="Add another user"><img src="/static/admin/img/icon-addlink.svg" alt="Add"></a><a class="related-widget-wrapper-link delete-related" id="delete_id_productinstance_set-0-Operator" data-href-template="/admin/auth/user/__fk__/delete/?_to_field=id&amp;_popup=1" title="Delete user"><img src="/static/admin/img/icon-deletelink.svg" alt="Delete"></a>
    
</div>
              
              </td>
              
          <td class="delete"></td>
        
        </tr>
     
        
        <tr class="form-row row2  empty-form" id="productinstance_set-empty">
        <td class="original">
          
          <input type="hidden" name="productinstance_set-__prefix__-id" id="id_productinstance_set-__prefix__-id">
          <input type="hidden" name="productinstance_set-__prefix__-archive" id="id_productinstance_set-__prefix__-archive">
          
        </td>
        
              <td class="field-product">
 
                  <div class="related-widget-wrapper">
    <select name="productinstance_set-__prefix__-product" data-minimum-input-length="3" data-placeholder="type name of product" id="id_productinstance_set-__prefix__-product" data-autocomplete-light-language="en" data-autocomplete-light-url="/product-autocomplete/" data-autocomplete-light-function="select2">
  <option value="" selected="">---------</option>

</select><div style="display:none" class="dal-forward-conf" id="dal-forward-conf-for_id_productinstance_set-__prefix__-product"><script type="text/dal-forward-conf">[{"type": "const", "val": "nome", "dst": "q_field"}]</script></div>
    
        <a class="related-widget-wrapper-link change-related" id="change_id_productinstance_set-__prefix__-product" data-href-template="/admin/archiverio/product/__fk__/change/?_to_field=id&amp;_popup=1" title="Edit product"><img src="/static/admin/img/icon-changelink.svg" alt="Edit"></a><a class="related-widget-wrapper-link add-related" id="add_id_productinstance_set-__prefix__-product" href="/admin/archiverio/product/add/?_to_field=id&amp;_popup=1" title="Add another product"><img src="/static/admin/img/icon-addlink.svg" alt="Add"></a><a class="related-widget-wrapper-link delete-related" id="delete_id_productinstance_set-__prefix__-product" data-href-template="/admin/archiverio/product/__fk__/delete/?_to_field=id&amp;_popup=1" title="Delete product"><img src="/static/admin/img/icon-deletelink.svg" alt="Delete"></a>
    
</div>
              
              </td>
              
              <td class="field-cost">
              
                  
                  <input type="number" name="productinstance_set-__prefix__-cost" step="0.01" id="id_productinstance_set-__prefix__-cost">
              
              </td>
              
              <td class="field-quantity">
                         
                  <input type="number" name="productinstance_set-__prefix__-quantity" class="vIntegerField" id="id_productinstance_set-__prefix__-quantity">
              
              </td>
                 
              <td class="field-Operator">
              
                  
                  <div class="related-widget-wrapper">
    <select name="productinstance_set-__prefix__-Operator" id="id_productinstance_set-__prefix__-Operator">
  <option value="" selected="">---------</option>

  <option value="1">admin</option>

  <option value="2">test</option>

</select>
    
        <a class="related-widget-wrapper-link change-related" id="change_id_productinstance_set-__prefix__-Operator" data-href-template="/admin/auth/user/__fk__/change/?_to_field=id&amp;_popup=1" title="Edit user"><img src="/static/admin/img/icon-changelink.svg" alt="Edit"></a><a class="related-widget-wrapper-link add-related" id="add_id_productinstance_set-__prefix__-Operator" href="/admin/auth/user/add/?_to_field=id&amp;_popup=1" title="Add another user"><img src="/static/admin/img/icon-addlink.svg" alt="Add"></a><a class="related-widget-wrapper-link delete-related" id="delete_id_productinstance_set-__prefix__-Operator" data-href-template="/admin/auth/user/__fk__/delete/?_to_field=id&amp;_popup=1" title="Delete user"><img src="/static/admin/img/icon-deletelink.svg" alt="Delete"></a>
    
</div>
              </td>
          <td class="delete"></td>
        </tr>
     <tr class="add-row"><td colspan="6"><a href="#">Add another product  istanza.</a></td></tr></tbody>
  </table>

where is `field-mymodel` ? Also on change of some inputs you need to trigger click on `Add` link ? — Swati, Feb 14 '21 at 11:34
Sorry, I had forgotten to update the first code. `field-model` is `field-product` (now is correct). On change of `field-product select` I wish to automatically add a new formset row — bit, Feb 14 '21 at 11:40
Hi there is no code for adding new rows ? did you tried something ? If yes add that as well in your question — Swati, Feb 14 '21 at 12:26
Yes, all my attempts are in the first code (js): I tried using `.formset()` and `.click()` but it doesn't work — bit, Feb 14 '21 at 15:45
Hi, you need to write code for same either in jquery or backend . Also , [this](https://stackoverflow.com/questions/501719/dynamically-adding-a-form-to-a-django-formset-with-ajax) might be helpful — Swati, Feb 18 '21 at 06:15
I had already seen that solution, but I wish to reuse original django code. I thought there was a way to replicate the "add-row" click using onChange — bit, Feb 19 '21 at 09:15

How to "add another row" in Django on change input

0 Answers0