개요
- html checkboxt value 값 저장하기
- 체크박스의 값을 서버에 저장할 수 있다.
- 페이지 변경 없이 비동기방식으로 작업을 수행할 수 있다.
코드
- 2개의 페이지가 필요하다.
하나는 값을 전송하는 페이지, 또하나는 값을 받아 파일로 저장하는 페이지
aa.html
<!DOCTYPE html>
<html>
<head>
<title>Checkbox Example</title>
<script>
function saveCheckbox() {
var checkboxes = document.getElementsByName("checkbox");
var checkedValues = [];
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
checkedValues.push(checkboxes[i].value);
}
}
if (checkedValues.length > 0) {
var xhr = new XMLHttpRequest();
xhr.open("POST", "save_checkbox.php");
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("checkbox=" + checkedValues.join(","));
}
return false;
}
</script>
</head>
<body>
<form onsubmit="return saveCheckbox()">
<label for="checkbox1">Checkbox 1</label>
<input type="checkbox" name="checkbox" value="12333" id="checkbox1">
<br>
<label for="checkbox2">Checkbox 2</label>
<input type="checkbox" name="checkbox" value="22222" id="checkbox2">
<br>
<button type="submit">Transmit</button>
</form>
</body>
</html>
save_checkbox.php
<?php
if (isset($_POST['checkbox'])) {
$checkedValues = explode(",", $_POST['checkbox']);
$fileContents = implode("\n", $checkedValues);
file_put_contents('/data/exec.log', $fileContents);
}
?>반응형
'프로그래밍 > javascirpt' 카테고리의 다른 글
| [javascript] ajax 웹 페이지 비동기 자동 갱신 (0) | 2023.03.02 |
|---|
댓글