hi I am trying to follow the below tutorial for my formset only i find problem in part:

container.insertBefore (newForm, addButton)

and the error that presents me is the following:

calculos.js: 195 Uncaught TypeError: Cannot read properties of undefined (reading 'childNode')

I've already tried everything but can't find the childNode

JS

let parteForm = document.querySelectorAll(".part-form")
let container = document.querySelector("#part-form-container")
let addButton = document.querySelector("#add-form")
let totalForms = document.querySelector("#id_form-TOTAL_FORMS")
let formNum = parteForm.length-1 // Get the number of the last form on the page with zero-based indexing


addButton.addEventListener('click', addForm)

function addForm(){
    //e.preventDefault()
    let newForm = parteForm[0].cloneNode(true)
    let formRegex = RegExp(`form-(\\d){1}-`,'g')
    formNum  
    newForm.innerHTML = newForm.innerHTML.replace(formRegex, `form-${formNum}-`)

    container.insertBefore(newForm, addButton)

    //parentnode.insertbefore(newnode,elnodoantesdelcualseinsertanewnode)
    //#part-form-container.insertbefore(div.part-form,)

    totalForms.setAttribute('value', `${formNum 1}`)
}

HTML

<form method="POST" id="part-form-container">
{% csrf_token %}

<div >
<div >
   <div >
        <div >
            <div >
                   <div >
                    <div >
                       <label for="verticalnav-email-input">Summary</label>                                                               
                     {{presupuestosparteform.resumen}}

                   </div>
                 </div>
               </div>


<h4 >Parts list</h4>
<p >Add the parts that you need to include.</p>

<input type="button"  id="add-form" onclick="addForm()" value="  Add part" />
<div >
<table  id="childTable1">
                                                                                
<tbody>
{{ formset.management_form }}
{% for form in formset %}
<div >
        <tr>
           <td>
                                                                                        
                   {{form.codigo}}

                    </td>
                     <td>
                                                                                        
                   {{form.descripcion}}

                  </td>

                 </tr>
               </div>
             {% endfor %}

           </tbody>
       </table>
</form>

CodePudding user response：

Maybe I don't understand your code but to me seems that some closing "div" tags are missing. My suggestion is to reorganize your code and clean it.

Now for what concern the bug

(https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore):

The insertBefore() method of the Node interface inserts a node before a reference node as a child of a specified parent node.

You just have to make sure that the cointer contains the element you want to insert before, so i think that just closing open div tags will solve. I also noticed that there is no element with Id="id_form-TOTAL_FORMS", so the setAttribute can't work.

let parteForm = document.querySelectorAll(".part-form")
let container = document.querySelector("#part-form-container")
let addButton = document.querySelector("#add-form")
let totalForms = document.querySelector("#id_form-TOTAL_FORMS")
let formNum = parteForm.length-1 // Get the number of the last form on the page with zero-based indexing


addButton.addEventListener('click', addForm)

function addForm(){
    //e.preventDefault()
    let newForm = parteForm[0].cloneNode(true)
    let formRegex = RegExp(`form-(\\d){1}-`,'g')
    formNum  
    newForm.innerHTML = newForm.innerHTML.replace(formRegex, `form-${formNum}-`)

    container.insertBefore(newForm, addButton)

    //parentnode.insertbefore(newnode,elnodoantesdelcualseinsertanewnode)
    //#part-form-container.insertbefore(div.part-form,)
}

<form method="POST" id="part-form-container">



                <label for="verticalnav-email-input">Summary</label>


          <h4 >Parts list</h4>
          <p >Add the parts that you need to include.</p>

          <input type="button"  id="add-form" onclick="addForm()" value="  Add part" />
          
<tbody>
  <div >
          <tr>
             <td>Data-1</td>
             <td>Data-2</td>
          </tr>
  </div>
</tbody>
</table>
</form>