버튼 클릭으로 폼 생성과 삭제를 해보자!

버튼만 띡 누르면 폼 또는 원하는 내용이 생성되고
또 버튼을 띡 누르면 그 내용을 삭제하게 만들어 봅시당.

아래의 내용은 만드는데 필요한 javascript 코드입니다.
저의 경우는 input box를 추가하였습니다. 5개를 제한개수로 하였습니다.

=> 폼 추가 코드

/**

* Keyword Form 추가를 위한 Javascript

* @author HyeYoungOh

*/
function addKeywordForm() {

  /**
   * 이 부분에는 추가될 부분의 div 이름을 넣으시면 됩니당
   */  

   var addedFormDiv = document.getElementById("addedKeyword");

   /**
     * str로 선언한 부분에 원하는 내용에 대해서 넣어주시면 됩니다.
    */ 

   var str = '<input type="text" id="image_keyword'+count+'" name="image_keyword'+count+'" value="" maxlength="100" size="100"/>'  + 

  '<a onClick="delKeywordForm('+count+')"/><img src="${IMG}/menu/minus.gif" title="Form 제거"></a>';

  

if (count <= 5) {

  var addedDiv = document.createElement("div"); // 폼 생성

   addedDiv.setAttribute("id", "keyword_Frm"+count);

   addedDiv.innerHTML  = str; // 폼 Div안에 HTML삽입

   addedFormDiv.appendChild(addedDiv); // 삽입할 DIV에 생성한 폼 삽입

count++;

} else {

alert("Keyword는 5개까지 입력하실 수 있습니다.");

}

}

=> 폼 삭제 코드

/**

* Keyword Form을 삭제를 위한 Javascript

* @author HyeYoungOh

*/

function delKeywordForm(thisCount){

  /**
   * 이 부분에는 추가될 부분의 div 이름을 넣으시면 됩니당
   */   

   var addedFormDiv = document.getElementById("addedKeyword");

   if(count > 1){

       var thisDiv = document.getElementById("keyword_Frm"+thisCount);

        // 마지막으로 생성된 폼의 ID를 통해 Div객체를 가져옴

       addedFormDiv.removeChild(thisDiv); // 폼 삭제 

   }else{

       document.addedFormDiv.reset(); // 폼 내용 삭제

   }

   count --;

}

이 코드를 이용하면 5개까지만 추가됩니다. 1개의 폼은 이미 생성되어 있어야 하고
그 폼 옆에 plus 모양의 버튼 등 추가를 위한 버튼이 있어야 합니다.

사용은 아래와 같이 합니다.

<input type="text" id="image_keyword1" name="image_keyword1" value="" maxlength="100" size="100"/>

<a onClick="addKeywordForm()"><img style="vertical-align:middle;" src="${IMG}/menu/plus.gif" title="keyword 추가" /></a>

<div id="addedKeyword"></div>

추가를 누르면 맨 아래의 div 부분으로 들어가게 됩니다.
추가되는 부분의 코드를 바꾸시면 더 다양하게 사용하실 수 있습니다.

2011.07 오혜영 작성