Transmit all checkboxes values on a server and then display another window
체크박스 중에 한가지라도 changed 되면 체크박스의 값들을 서버로 전달하는 예제를 만들겠습니다. 서버측에서는 값을 받으면 각 체크박스의 상태정보가 담긴 또 다른 window 를 보낼 겁니다.
Transmit the checkboxes values and display a new window
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel=stylesheet href=jquery.mobile/jquery.mobile.css />
<script src=jquery.js></script>
<script src=jquery.mobile/jquery.mobile.js></script>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Home</h1>
</div>
<div data-role=content>
<span> Choose an apartment: </span>
<div data-role=controlgroup>
<label for=id1> 1 bedroom </label>
<input type=checkbox id=id1 name=p1 />
<label for=id2> 2 bedrooms </label>
<input type=checkbox id=id2 name=p2 />
<label for=id3> 3 bedrooms </label>
<input type=checkbox id=id3 name=p3 />
<label for=id4> 4 bedrooms </label>
<input type=checkbox id=id4 name=p4 />
<label for=id5> 5 bedrooms </label>
<input type=checkbox id=id5 name=p5 />
</div>
</div>
</div>
</body>
</html>
<script>
$(":checkbox").bind ("change", function (event)
{
var data = { };
$(":checkbox").each (function (index)
{
data[this.name] = $(this).attr ("checked");
});
$.mobile.changePage ("action.php", { data : data } );
});
</script>
여기서 우리는 필드 이름이 포함된 data
property를 사용했고 값들을 transmit 했습니다.
Eg p1,
set to "true"
(or "checked")
if checked, or "false"
(or "undefined")
if not checked.
action.php file
<?
$p1 = $_REQUEST["p1"];
$p2 = $_REQUEST["p2"];
$p3 = $_REQUEST["p3"];
$p4 = $_REQUEST["p4"];
$p5 = $_REQUEST["p5"];
function display_selected ($p)
{
if ($p == "true" or $p == "checked")
echo ("checked");
else
echo ("unchecked");
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=Content-Type content=text/html;charset=iso-8859-1 />
</head>
<body>
<div data-role=page id=win2 data-add-back-btn=true>
<div data-role=header>
<h1>Window 2</h1>
</div>
<div data-role=content>
<p> 1 bedroom : <?= display_selected ($p1) ?> </p>
<p> 2 bedrooms: <?= display_selected ($p2) ?> </p>
<p> 3 bedrooms : <?= display_selected ($p3) ?> </p>
<p> 4 bedrooms : <?= display_selected ($p4) ?> </p>
<p> 5 bedrooms : <?= display_selected ($p5) ?> </p>
</div>
</div>
</body>
</html>
|
|
|
action14.php
tistory489_01.html
Use a submit button to transmit information
체크박스 중 한가지라도 change 했을 때 그 값을 전달하는게 아니라 submit button을 눌렀을 때 그 값을 전달하게도 만들 수 있습니다.
Send the checkboxes when you click on the submit button
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel=stylesheet href=jquery.mobile/jquery.mobile.css />
<script src=jquery.js></script>
<script src=jquery.mobile/jquery.mobile.js></script>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Home</h1>
</div>
<div data-role=content>
<form action=action.php>
<span> Choose an apartment: </span>
<div data-role=controlgroup>
<label for=id1> 1 bedroom </label>
<input type=checkbox id=id1 name=p1 />
<label for=id2> 2 bedrooms </label>
<input type=checkbox id=id2 name=p2 />
<label for=id3> 3 bedrooms </label>
<input type=checkbox id=id3 name=p3 />
<label for=id4> 4 bedrooms </label>
<input type=checkbox id=id4 name=p4 />
<label for=id5> 5 bedrooms </label>
<input type=checkbox id=id5 name=p5 />
</div>
<input type=submit value=OK>
</form>
</div>
</div>
</body>
</html>
form 안에 OK button 과 checkbox들이 있습니다. 그리고 <form action=action.php>이 있어서 버튼을 누르면 action.php를 call 하게 될 겁니다.
이 action.php는 이전에 사용했던 php 와 거의 동일합니다.
action.php file
<?
$p1 = $_REQUEST["p1"];
$p2 = $_REQUEST["p2"];
$p3 = $_REQUEST["p3"];
$p4 = $_REQUEST["p4"];
$p5 = $_REQUEST["p5"];
function display_selected ($p)
{
if ($p == "on")
echo ("checked");
else
echo ("unchecked");
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=Content-Type content=text/html;charset=iso-8859-1 />
</head>
<body>
<div data-role=page id=win2 data-add-back-btn=true>
<div data-role=header>
<h1>Window 2</h1>
</div>
<div data-role=content>
<p> 1 bedroom : <?= display_selected ($p1) ?> </p>
<p> 2 bedrooms: <?= display_selected ($p2) ?> </p>
<p> 3 bedrooms : <?= display_selected ($p3) ?> </p>
<p> 4 bedrooms : <?= display_selected ($p4) ?> </p>
<p> 5 bedrooms : <?= display_selected ($p5) ?> </p>
</div>
</div>
</body>
</html>
|
|
|
다른 점은 체크박스가 selected 됐는지 안 됐는지를 확인 하는 부분입니다. 여기서는 value 가 "on"인지의 여부를 봅니다. "on"이면 체크 된 상황이죠. "on"이 아니면 체크된 상황이 아니구요.
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| 기존 리스트에 radio button 추가하기/지우기 (0) | 2012.11.30 |
|---|---|
| radio 버튼의 값 할당하거나 retrieve 하기 (7) | 2012.11.29 |
| Ajax 로 radio 버튼 insert 하기 (1) | 2012.11.28 |
| jQuery Mobile radio button 으로 HTML element 바꾸기 (1) | 2012.11.28 |
| 다이나믹하게 radio button 생성하기 (0) | 2012.11.28 |
| 체크박스 customize 하기 (5) | 2012.11.27 |
| 체크박스에서 이벤트 관리하기 (0) | 2012.11.26 |
| 리스트에 체크박스 삽입/삭제 하기 (0) | 2012.11.25 |
| 체크박스에 값 할당/retrieve 하기 (0) | 2012.11.24 |
| Ajax 로 checkbox 만들어 넣기 (0) | 2012.11.21 |