폼 추가 및 삭제에 대한 Upgrade code

이전에 올렸던 버튼 클릭으로 폼 생성 및 삭제에 대한 코드의 문제점을 발견하였습니다.

http://ojava.tistory.com/trackback/35



이전에 사용하던 코드로는 변수로 선언된 count가 폼 추가 시마다 1씩 증가합니다. 폼 삭제시에는 1씩 감소하겠지요.

만약 5개의 폼이 생성되어 있는 상태라고 가정해봅시다. count는 증가해서 6이 되어있겠죠.

4번째의 폼을 지우게 되면 count는 1이 감소하여 5가 됩니다.

따라서 다시 5번째로 폼을 추가하게 되면 count를 따라 5의 이름을 가진 폼이 또 다시 생성됩니다.

페이지를 이용하는 유저가 순차적으로 삭제하고 추가한다면 얼마나 좋겠습니까 ㅠ_ㅠ

하지만 그렇지 않다는 것. 그리고 그런 점을 고려해서 코드를 구성해야 한다는 것을 다시 상기시키며

변화된 코드를 보여드리겠습니다.

// 키워드 개수 +1 (배열 이용해서 2~5까지 숫자 겹치지 않도록 하는 초기값 설정)

var count = 기본적으로 입력하셔도 무방하고 다른 페이지에서 넘어오는 값을 받아오셔도 됩니다.

var countArray = new Array;

if (count < 6) {

  countArray.length=6-count;

  for (var j=count,i=0; j<=5,i<6-count; j++,i++) {

  countArray[i] = j;

  }

}

// 폼 추가를 5개까지만 가능하게 하였습니다. count 및 숫자는 원하는 개수만큼 설정하세요.

/**

* Keyword Form 추가를 위한 Javascript

* @author HyeYoungOh

*/

function addKeywordForm() {

 /**

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

   */  

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

   var nowCount = ($("div[id^=keyword_Frm]").size()+2);

   var str = '<input type="text" id="image_keyword'+countArray[0]+'" name="image_keyword'+countArray[0]+'" value="" maxlength="100" size="100"/>'  + 

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

  

if (nowCount <= 5) {

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

   addedDiv.setAttribute("id", "keyword_Frm"+countArray[0]);

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

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

   countArray.shift();

    } else {

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

}

}

/**

* Keyword Form을 삭제를 위한 Javascript

* @author HyeYoungOh

*/

function delKeywordForm(thisCount){

 /**

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

   */   

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

   // 현재 추가되어있는 키워드 div 개수

   var nowCount = $("div[id^=keyword_Frm]").size();

   

   if(nowCount >= 1){

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

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

       countArray.push(thisCount);

   }else{

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

   }

}

변경된 내용은 크게 두 가지 입니다.

1. 현재 추가된 Form의 개수를 jQuery를 이용해서 받아옵니다. 
   
   addKeywordFrm을 잘 보시면 div를 추가함으로써 Form을 추가하고 있는 것을 알 수 있습니다.
   
   이를 이용해서 div 중에서 id값이 keyword_Frm으로 시작하는 모든 div의 개수를 받아오도록 하였습니다.
   
   jQuery의 엘리먼트 선택방식은 매우 효율적입니다.
   
   잘 알아두시면 효율적으로 선택하고자 하는 엘리먼트들을 선택 및 수정할 수 있으므로 잘 알아둡시다!
   
   
   
2. 자바스크립트의 배열을 이용하였습니다.
   
   자바스크립트의 배열은 var 변수명 = new Array(); 와 같이 선언이 가능합니다.
   
   매개변수로 숫자를 넣어 길이를 지정해 주거나, 값을 넣어 초기화 시킬 수도 있습니다.
   
   자바스크립트 배열 중 제가 이용한 내용은 JAVA의 Queue 방식입니다.
   
   먼저 들어간 내용이 먼저 나와서 사용되고 삭제되면 배열의 맨 뒤로 돌아가서 차례를 기다리는 방식입니다.
   
   FIFO (First in, First out). 즉 선입선출 방식입니다.
   
   코드에서 굵은 빨간색 글씨로 보이는 내용이 이를 위한 방법입니다.
   
   맨 윗부분에서 초기화 시켜둔 폼의 개수와 이를 이용해서 만들 수 있는 폼의 고유 번호를 배열에 저장해두었습니다.
   
   폼을 추가하기 위해 + 버튼을 클릭하면 저장된 배열에서 맨 앞의 내용을 불러오게 되고,
   
   이 내용을 사용했으므로 배열.shift(); 를 해주어 맨 앞의 내용을 버립니다.
   
   폼을 삭제하는 경우 - 버튼을 클릭하여 삭제하게 되는데, 이 때 삭제할 폼의 번호를 매개변수로 받습니다.
   
   삭제된 내용이므로 다시 폼으로 생성될 기회를 얻게 되므로 배열.push(배열에 넣을 값); 을 통해서
   
   값을 맨 뒤에 붙여 넣을 수 있습니다.
   
   

이런 변경을 통해서 겹치는 id, name 값이 없어지게 되므로 각각의 내용이 고유하게 넘어가게 됩니다.

앞의 내용도 나름 고민하고 만들었다고 생각했는데 만들고 나서 보니 고칠 부분이 많네요.

이용하는데 도움되시길 바랍니다. 너무 오랜만의 포스팅이네요. 좋은 하루 보내세요^.^ 

 2011.08 8월은 좋은 달! 오혜영 작성