동적으로 생성 된 양식의 JavaScript 제거 필드 추가

Question

JavaScript를 사용하여 동적으로 생성 된 양식에서 제거 필드를 추가하는 방법에 대한 한 가지 예입니다.

Answer 1

<h3>javascript add remove fields in dynamically generated forms</h3> 
<br> 
modification of http://www.quirksmode.org/dom/domform.html 
<br> 
<br><br> 
<? 
$action_url = {form action here}; 
?> 


<script type="text/javascript"> 
var i = 1; 
function addCost(cost_no){ 


     cn = cost_no; 

     //max nubmer of fields, for all cases together 
     if (i <= 300){ 
       i++; 

     ident = 'cost['+cn+']['+i+']'; 


     var div = document.createElement('div'); 
       //div.style.width = "300px"; 
       //div.style.height = "50px"; 
       //div.style.color = "white"; 
       div.setAttribute('class', 'myclass'); 

      div.innerHTML = '<input type="text" \n\ 
            name="'+ident+'" \n\ 
            id="'+ident+'" \n\ 
          > \n\ 
          <input type="button"  \n\ 
            value="-"   \n\ 
            onclick="removeKid('+cn+', this)"\n\ 
          >'; 
      document.getElementById('kids'+cn+'').appendChild(div); 
     } 
} 

function removeKid(cost_no, div) { 

    //alert(test); 
    cn = cost_no; 

    document.getElementById('kids'+cn+'').removeChild(div.parentNode); 
     i--; 
} 
</script> 

<form action="<?= $action_url;?>" method="post" > 

<? 
for ($cost_id=0; $cost_id<=10; $cost_id++) 
    { 
    echo "The form id is : $cost_id <br>"; 

?> 

    <div id="kids<?= $cost_id; ?>"> 
     <input type="button" 
       id="add_cost<?= $cost_id; ?>" 
       onClick="addCost(<?= $cost_id; ?>)" 
       value="Add field:<?= $cost_id; ?>" 
     /> 
    </div> 
    <br> 
<? 
    } 
?> 




<br> 
<input type="submit" name="submit" value="submit" />(limit 300) 
</form>