Застрял на моей динамической форме

Question

Я пытаюсь создать дополнительное поле под названием «возраст» на той же линии или рядом с дочерним полем. Итак, когда я нажимаю кнопку «Добавить/плюс», он даст мне дополнительное поле с ребенком и возрастом, а не только с одним дочерним полем. . У кого-нибудь есть время, чтобы помочь и показать, как это сделать правильно, потому что я не могу сделать это Работа.?

PHP

 <?php 
if(isset($_POST['name'])){ 
$name = $_POST['name']; 
$phone = $_POST['phone']; 
$ageslist = ""; 
$childlist = ""; 
$more = TRUE; 
$i = 1; 
while ($more){ 
    if ((isset($_POST['child_'.$i])) && ($_POST['child_'.$i] != "") && ($_POST['ages_'.$i]) && ($_POST['ages_'.$i] != "")){ 
     $childlist .= $_POST['child_'.$i]; 
     $childlist .= "<br />"; 
     $ageslist .= $_POST['ages_'.$i]; 
     $ageslist .= "<br />"; 
     } else { $more = FALSE; 
     } 
     $i++; 
     } 
     echo $name; 
     echo "<br />"; 
     echo $phone; echo "<br />"; 
     echo "<br />"; 
     echo $ageslist; 
     echo "<br />"; 
     echo $childlist; } 
     ?> 

Javascript

  var i = 1; 
      function addKid(){ 
       if (i <= 6){ 
        i++; 
        var div = document.createElement('div'); 
        div.style.width = "300px"; 
        div.style.height = "50px"; 
        div.style.color = "white"; 
        div.setAttribute('class', 'myclass'); 
        div.innerHTML = 'Child : <input type="text" name="child_'+i+'" ><input type="button" id="add_kid()" onclick="addKid()" value="+" /><input type="button" value="-" onclick="removeKid(this)">'; 
        div.innerHTML = 'Ages : <input type="text" name="ages_'+i+'" ><input type="button" id="add_kid()" onclick="addKid()" value="+" /><input type="button" value="-" onclick="removeKid(this)">'; 
        document.getElementById('kids').appendChild(div); 
        } 
        } 
        function removeKid(div) { 
         document.getElementById('kids').removeChild(div.parentNode); 
         i--; } 

HTML

    <form action="more_kids.php" method="post" > 
        Name: <input type="text" name="name"><br /> 
        <div id="kids"> 
         Child : <input type="text" name="child_1" > 
         Ages : <input type="text" name="ages_1" > <input type="button" id="add_kid()" onclick="addKid()" value="+" /> 
        </div> Phone: <input type="text" name="phone"><br /> 
        <input type="submit" name="submit" value="submit" /> 
       </form> 

Answer 1

Существует одна ошибка в JavaScript.

div.innerHTML = 'Child : <input type="text" name="child_'+i+'" ><input type="button" id="add_kid()" onclick="addKid()" value="+" /><input type="button" value="-" onclick="removeKid(this)">'; 
       div.innerHTML = 'Ages : <input type="text" name="ages_'+i+'" ><input type="button" id="add_kid()" onclick="addKid()" value="+" /><input type="button" value="-" onclick="removeKid(this)">'; 

Вы переписываете div.innerHTML. Второй по возрасту должен быть div.innerHTML + = '';

Также вы указали div..style.color white. Поэтому ярлыки невидимы. Вот сценарий, который работает.

 <script> 
    var i = 1; 
     function addKid(){ 
      if (i <= 6){ 
       i++; 
       var div = document.createElement('div'); 
       div.style.width = "500px"; 
       div.style.height = "30px"; 
       // div.style.color = "white"; 
       div.setAttribute('class', 'myclass'); 
       div.innerHTML = 'Child : <input type="text" name="child_'+i+'" >'; 
       div.innerHTML += ' Ages : <input type="text" name="ages_'+i+'" > <input type="button" onclick="addKid()" value="+" /> <input type="button" value="-" onclick="removeKid(this)"> \n'; 

       alert(div.innerHTML); 
       document.getElementById('kids').appendChild(div); 
       } 
       } 
       function removeKid(div) { 
        document.getElementById('kids').removeChild(div.parentNode); 
        i--; }  

    </script>