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>
첫번째 아이템을 선택하면 아래와 같은 화면을 보실 겁니다.
|
|
action17.php
tistory501_01.htmlUse 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>
|
|
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| switch 에서 이벤트 관리하기 (0) | 2012.12.05 |
|---|---|
| switch 값 할당하거나 retrieve 하기 (0) | 2012.12.05 |
| Ajax로 switch 삽입하기 (1) | 2012.12.04 |
| HTML 을 jQuery Mobile switch로 바꾸기 (0) | 2012.12.04 |
| 다이나믹 하게 switch 만들기 (0) | 2012.12.04 |
| radio 버튼 커스터마이징 하기 (0) | 2012.12.02 |
| Radio button 에서 이벤트 관리하기 (0) | 2012.12.01 |
| 기존 리스트에 radio button 추가하기/지우기 (0) | 2012.11.30 |
| radio 버튼의 값 할당하거나 retrieve 하기 (7) | 2012.11.29 |
| Ajax 로 radio 버튼 insert 하기 (1) | 2012.11.28 |