 |
|
| |
| PHP 이름이 같은 폼태그(Form Tag)의 값(value) 처리하기 |
|
|
  |
12년 전
|
폼태그(<form></form>)내에 있는 INPUT 태그(INPUT BOX), 체크박스 태그(CHECK BOX) 등등에 동일한 이름이 사용된 경우 PHP에서는 ASP, JSP 와는 좀 다르게 처리를 해줘야 합니다.
아래는 이름이 같은 INPUT 태그가 여러개가 삽입되어 있는 html 기본 페이지입니다. 눈여겨 보실 부분은 INPUT 태그의
이름(name)입니다.
<html>
<head>
<title>www.webmadang.net</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body>
<form name="form" method="POST" action="addtext_test.php">
<input type="text" name="addText" size="20"><br>
<input type="text" name="addText" size="20"><br>
<input type="text" name="addText" size="20"><br>
<input type="text" name="addText" size="20"><br>
<input type="text" name="addText" size="20"><br>
<input type="submit" name="button" value="전 송">
</form>
</body>
</html>
ASP,JSP에서는 위와 같이 이름을 정해서 처리해도 되지만 PHP에서는 위와 같은 경우 INPUT 태그의 이름을 배열 형태로 만들어 줘야 합니다. 아래는 INPUT 태그의 이름을 배열 형태로 바꾼 예입니다.
<!---- 전송할 페이지 --->
<html>
<head>
<title>www.webmadang.net</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body>
<form name="form" method="POST" action="addtext_test.php">
<input type="text" name="addText[]" size="20"><br>
<input type="text" name="addText[]" size="20"><br>
<input type="text" name="addText[]" size="20"><br>
<input type="text" name="addText[]" size="20"><br>
<input type="text" name="addText[]" size="20"><br>
<input type="submit" name="button" value="전 송">
</form>
</body>
</html>
전송(submit) 버튼에 의해서 전송이 이루어지면 받는 PHP 페이지에서 처리는 아주 간단합니다.
<?php
//받는 페이지
$addText = $_REQUEST[addText];
$addText = implode(',',$addText);
echo $addText;
?>
넘겨진 값은 배열로 저장되고 implode 나 join 함수를 이용해서 배열에 특수문자를 삽입하여 합쳐주시면 됩니다.
넘겨진 값은 아래와 같이 count 또는 sizeof 함수를 이용해서 개별적으로 확인 할 수도 있습니다.
<?php
//받는 페이지
$addText = $_REQUEST[addText];
for($i=0;$i<count($addText);$i++)
{
echo $addText[$i]."<br>\n";
}
?>
PHP에서 이름이 동일한 폼태그(Form Tag) 내의 값(value) 처리하기의 핵심은 동일한 이름을 같는 태그의 값을 배열로 잡아 주는 것입니다.
그럼 배열형식으로 이름을 잡아준 INPUT 태그의 값을 사용자가 입력하지 않은 경우에 자바스크립트에서 처리는 어떻게
할까요?
document.form.elements["addText[]"][0].value;
INPUT 태그 중 가장 첫번째는 위와 같이 접근할 수 있습니다. 아니면 아래의 자바스크립트 예제와 같이 처리할 수도 있습니다.
<html>
<head>
<title>www.webmadang.net</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script language="javascript">
<!--
var oTbl;
//Row 추가
function insRow() {
oTbl = document.getElementById("addTable");
var oRow = oTbl.insertRow();
oRow.onmouseover=function(){oTbl.clickedRowIndex=this.rowIndex}; //clickedRowIndex - 클릭한 Row의 위치를 확인;
var oCell = oRow.insertCell();
//삽입될 Form Tag
var frmTag = "<input type=text name=addText[] style=width:350px; height:20px;> ";
frmTag += "<input type=button value='삭제' onClick='removeRow()' style='cursor:hand'>";
oCell.innerHTML = frmTag;
}
//Row 삭제
function removeRow() {
oTbl.deleteRow(oTbl.clickedRowIndex);
}
function frmCheck()
{
var frm = document.form;
for( var i = 0; i <= frm.elements.length - 1; i++ ){
if( frm.elements[i].name == "addText[]" )
{
if( !frm.elements[i].value ){
alert("텍스트박스에 값을 입력하세요!");
frm.elements[i].focus();
return;
}
}
}
}
//-->
</script>
</head>
<body>
<form name="form" method="post">
<table width="400" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2" align="left" bgcolor="#FFFFFF">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5" bgcolor="#FFFFFF" height="25" align="left"><input name="addButton" type="button" style="cursor:hand" onClick="insRow()" value="추가">
<font color="#FF0000">*</font>추가버튼을 클릭해 보세요.</td>
</tr>
<tr>
<td height="25">
<table id="addTable" width="400" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" border="0">
<tr>
<td><input type="text" name="addText[]" style="width:350px; height:20px;"></td>
<td align="left"></td>
</tr>
</table></td>
</tr>
</table>
</td>
</tr>
</table>
<table width="400" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="10">
</td>
</tr>
<tr>
<td align="center">
<input type="button" name="button" value="확인" onClick="frmCheck();">
</td>
</tr>
</table>
</form>
</body>
</html> |
|
 추천 : 447 |
추천
목록
|
|
| |
|
