Examples of manipulation of radio buttons
Transmit the selected radio button to the server and then display another window
서버에 방금 select 된 radio 버튼을 전송하려고 합니다. 서버에서는 연관된 radio 버튼의 id 를 포함한 다른 윈도우를 회송할 겁니다.
Transmit
the id of the selected radio button and then 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 the number of rooms: </span>
<div data-role=controlgroup>
<label for=id1> 1 </label>
<input type=radio id=id1 name=rooms />
<label for=id2> 2 </label>
<input type=radio id=id2 name=rooms />
<label for=id3> 3 </label>
<input type=radio id=id3 name=rooms />
<label for=id4> 4 </label>
<input type=radio id=id4 name=rooms />
<label for=id5> 5 </label>
<input type=radio id=id5 name=rooms />
</div>
</div>
</div>
</body>
</html>
<script>
$(":radio").bind ("change", function (event)
{
var data = { };
data["rooms"] = this.id;
$.mobile.changePage ("action.php", { data : data } );
});
</script>
Each
time you click a radio button, a call to the server is performed that
displays a window indicating the identifier of the selected radio
button.
We
use the data
property that contains the property rooms,
indicating the id
of the radio button. For example data.rooms
is id1 if the first radio button is selected.
radio 버튼을 클릭할 때마다 server 를 call 하는 것이 발생합니다. 그러면 select 된 radio 버튼의 identifier 를 가리키는 window 를 display 하게 됩니다.
action.php
file
<?
$rooms = $_REQUEST["rooms"];
?>
<!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> Selected rooms (id) : <?= $rooms ?> </p>
</div>
</div>
</body>
</html>
첫번째 아이템을 선택하면 아래와 같은 화면을 보실 겁니다.
Use a submit button to transmit information
select 된 radio 버튼을 pass 하는 대신에 submit button 버튼을 사용해서 선택된 radio 버튼 값을 표시하는 화면을 display 하도록 할 수 있습니다.
Send
the selected radio button 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 the number of rooms: </span>
<div data-role=controlgroup>
<label for=id1> 1 </label>
<input type=radio id=id1 name=rooms value=1 />
<label for=id2> 2 </label>
<input type=radio id=id2 name=rooms value=2 />
<label for=id3> 3 </label>
<input type=radio id=id3 name=rooms value=3 />
<label for=id4> 4 </label>
<input type=radio id=id4 name=rooms value=4 />
<label for=id5> 5 </label>
<input type=radio id=id5 name=rooms value=5 />
</div>
<input type=submit value=OK>
</form>
</div>
</div>
</body>
</html>
이제 form 에 OK button과 radio buttons들이 있습니다. 그리고 action.php를 call 합니다. 자바스크립트 부분은 너무너무 간단합니다. 왜냐하면 자바스크립트가 필요 없으니까요. jQuery Mobile 이 form validation 과 함께 내부적으로 과정을 모두 진행을 합니다.
이전 예제와 비교하자면 이번 예제에서는 각 radio 버튼마다 반드시 value
attribute를 명시해야 합니다. 그 값이 서버로 전송될 거거든요. 그래서 그 값으로 선택된 radio 버튼을 알 수 있는 겁니다.
action.php는 이전과 같습니다. 이전 파일을 그대로 사용하셔도 됩니다.
action.php
file
<?
$rooms = $_REQUEST["rooms"];
?>
<!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> Selected rooms (value) : <?= $rooms ?> </p>
</div>
</div>
</body>
</html>
tistory506_03.html
action19.php
