Создание новой формы с помощью javascript с onclick кнопки

Question

Я пытаюсь позволить моему пользователю создать форму для добавления члена команды столько, сколько им нужно автоматически с помощью JavaScript и w3c dom. Но это не работает.

Вот моя функция JavaScript, а также страницы HTML и форма я пытаюсь создать:

var counter = 0; 
 

 
function member_card() 
 
{ 
 
    counter++; 
 
    var newFields = document.getElementById('teamform').cloneNode(true); 
 
    newFields.id = ''; 
 
    newFields.style.display = 'block'; 
 
    var newField = newFields.childNodes; 
 
    for (var i=0;i<newField.length;i++) { 
 
     var theName = newField[i].name 
 
\t \t if (theName) 
 
\t \t \t newField[i].name = theName + counter; 
 
    } 
 
    var insertHere = document.getElementById('addform'); 
 
\t insertHere.parentNode.insertBefore(newFields,insertHere); 
 
} 
 

 
window.onload = member_card;

<section class="container" xmlns="http://www.w3.org/1999/html"> 
 
     <div class="row addform"> 
 
      <div class="col-md-6 addform-col"> 
 

 
       <div class="row input-field"> 
 
        <div class="col-md-4"> 
 
         <label class="add-lable">Team Member<spna style="color:red">*</spna></label> 
 
        </div> 
 

 
         <div name="teamform" class="col-md-6" style="display: none"> 
 
          <form> 
 
          <div name="imageholder" class="row tm-image-holder"> 
 
           <div class="col-md-12"><div style="background-image: url(../img/DSC_3305.jpg);" class="tm-img"></div></div> 
 
          </div> 
 
          <a name="photo" href="#" class="btn btn-block btn-lg btn-primary inout-margin mybut"><span class="glyphicon glyphicon-search"></span> Browse Photo</a> 
 
          <input name="name" type="text" class="add-input input-margin" placeholder="Name, Mohammad, ... *"> 
 
          <input name="job" type="text" class="add-input" placeholder="Job, Developer, Designer, ... *"> 
 
          <textarea name="explain" class="add-textarea input-margin" rows="4" placeholder="Explain this member in 2 to 4 lines *"></textarea> 
 
          </form> 
 
         </div> 
 

 
        <form method="post" action=""> 
 
         <input type="button" id="member_card" value="Give me more fields!" /> 
 
        </form> 
 

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

Answer 1

Там нет элемента с id = "teamform". Вам необходимо изменить name="teamform"id="teamform" в вашем html.

Чтобы увидеть эту проблему, обычно проще всего запустить код в Chrome или в другом браузере с инструментами разработчика, а также открыть консоль отладчика, чтобы увидеть, как работает ваш код.

Answer 2

var counter = 0; 
 

 
function member_card() 
 
{ 
 
    counter++; 
 
    debugger; 
 
    var newFields = document.getElementById('teamform').cloneNode(true); 
 
    newFields.id = ''; 
 
    newFields.style.display = 'block'; 
 
    var newField = newFields.childNodes; 
 
    for (var i=0;i<newField.length;i++) { 
 
     var theName = newField[i].name 
 
\t \t if (theName) 
 
\t \t \t newField[i].name = theName + counter; 
 
    } 
 
    var insertHere = document.getElementById('addform'); 
 
\t insertHere.parentNode.insertBefore(newFields,insertHere); 
 
} 
 

 
window.onload = member_card;

<section class="container" xmlns="http://www.w3.org/1999/html"> 
 
     <div class="row addform" id="addform"> 
 
      <div class="col-md-6 addform-col"> 
 

 
       <div class="row input-field"> 
 
        <div class="col-md-4"> 
 
         <label class="add-lable">Team Member<spna style="color:red">*</spna></label> 
 
        </div> 
 

 
         <div id="teamform" class="col-md-6" style="display: none"> 
 
          <form> 
 
          <div name="imageholder" class="row tm-image-holder"> 
 
           <div class="col-md-12"><div style="background-image: url(../img/DSC_3305.jpg);" class="tm-img"></div></div> 
 
          </div> 
 
          <a name="photo" href="#" class="btn btn-block btn-lg btn-primary inout-margin mybut"><span class="glyphicon glyphicon-search"></span> Browse Photo</a> 
 
          <input name="name" type="text" class="add-input input-margin" placeholder="Name, Mohammad, ... *"> 
 
          <input name="job" type="text" class="add-input" placeholder="Job, Developer, Designer, ... *"> 
 
          <textarea name="explain" class="add-textarea input-margin" rows="4" placeholder="Explain this member in 2 to 4 lines *"></textarea> 
 
          </form> 
 
         </div> 
 

 

 
        
 

 
        <form method="post" action=""> 
 
         <input type="button" id="member_card" value="Give me more fields!" /> 
 
        </form> 
 

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