Where The Streets Have No Name

Form 배열객체를 JavaScript 와 PHP 에서 공유하기 본문

Developement/Web

Form 배열객체를 JavaScript 와 PHP 에서 공유하기

highheat 2006. 7. 28. 15:31
◆ 바뻐서 다 읽기 힘든분을 위한 핵심 요약 ◆
   form에서 name=abc[] 식으로 배열로 선언했어도
   JavaScript에서 접근은 "abc[]" 문자열로 접근할 것..,
   요약끝...




많은 분들이 form 객체에서 선언한 배열을
JavaScript와 PHP에서 함께 사용하기를 원합니다. 


form에서는 같은 이름을 여러번 선언하면 배열로 선언되지만 
이상하게 Submit으로 넘기면 PHP에서는 배열이 사라집니다. 

<input type=text name=abc> 
<input type=text name=abc> 
<input type=text name=abc> 

위처럼 form에서 선언하면 JavaScript 내에서 document.form.abc[2].value 식의 
배열로 이상없이 접근이 되는데, 
php에서는 $abc 라는 단일변수로만 넘어오게됩니다. 


그래서 또다시 아래와같이 선언해 봅니다. 

<input type=text name=abc[]> 
<input type=text name=abc[]> 
<input type=text name=abc[]> 

위처럼 선언하면 PHP 쪽에서는 $abc[2] 식으로 배열접근이 가능하게 됩니다. 
그러나 이번에는 자바스크립트에서 접근이 안되게 됩니다. 
document.form.abc[2].value <- 실패 
document.form.abc.value <- 실패 
document.form.abc[][2].value <- 실패 

이유가 뭘까요? 

원인은 form 문에서는 애시당초 배열선언이 없기때문입니다. 
그냥 같은 이름을 여러번 선언한 것이 배열이 될 뿐입니다. 

<input type=text name=abc[]> 
<input type=text name=abc[]> 
<input type=text name=abc[]> 

위 선언은 마치 배열을 선언한듯 하지만 사실을 배열이 아닙니다. 
단순히 name="abc[]" 라는 문자열로 인식될 뿐입니다. 

<input type=text name=abc[0][]> 
<input type=text name=abc[][][][][]> 
<input type=text name=abc[2][3]> 

어떻게 선언하더라도 배열이 생성되지 않음을 유의하십시요..


그렇다면 이렇게 선언한것과 abc[] 로 선언한 것이 똑 같나요? 
<input type=text name=abcde> 
<input type=text name=abcde> 
<input type=text name=abcde> 

그렇습니다. 그 어떤 선언을 하더라도 form객체 자체는 배열로 선언되지
않습니다, 단순 문자열로만 선언될 뿐입니다..
다만 JavaScript 쪽에서 같은 이름이 중복되면 그 때 배열로 접근이 됩니다.
그리고 문자열에 [] 가 포함되면 접근할때 차이가 있습니다. 

document.form.객체이름[2].value 식으로 접근을 해야 하는대 
"abc[]" 로 선언한 것과 "abcde"로 선언한 것을 똑같이 표현하면 
아래와같이 될 것입니다. 

document.form.abc[][2].value 
document.form.abcde[2].value 

그러나 abc[][2] 는 자바스크립트에서 잘못 해석하여 2차원배열로 간주하게 됩니다. 
바로 그것 때문에 서로 호환이 안되는 것입니다. 

그것을 극복하려면 자바스크립트쪽에 문자열임을 알 수 있도록 조치를 해주어야 합니다. 
document.form["abcde"][2].value 

이렇게 해 주듯이 abc[] 역시 아래처럼 해 줍니다. 

document.form["abc[]"][2].value 


아래는 지금 설명을 검증하는 소스입니다. 

-------- test.php --------------------- 
<? 
echo "JavaScript로 조립된 문자열 = $fulltel <br>"; 
echo "PHP로 새로 조립된 문자열 = ($tel[0]) $tel[1] - $tel[2] <br>"; 
?> 

<html> 
<<script> language=JavaScript>
function check_submit() {

    // "tel[]" 은 배열이 아님을 유의하세요.....
    for( var i = 0; i < 3; i ++ ) {
       if( ! document.test["tel[]"][i].value ) {
           alert("뭐가 빠져짜나~!");
           document.test["tel[]"][i].focus();
           return false;
       }
   }

   x = document.test["tel[]"];
   document.test.fulltel.value = x[0].value + "-" + x[1].value + "-" +  x[2].value;

   return true;
}
</<script>>
<body> 
<form name=test action=<?=$PHP_SELF?> onsubmit="return check_submit();"> 
<input type=hidden name=fulltel> 

<input type=text name=tel[]>-<input type=text name=tel[]>-<input type=text name=tel[]><input type=submit value="눌러"> 
</form> 
</body> 
</html>
'Developement/Web' Related Articles more