여러개의 input을 오브젝트로 만들고 싶습니다.
본문
input아 아래처럼 있다고 할 때,
비동기로 db에 저장하려고 하는데,
<input type="text" name="name[]" value="강백호"> <input type="text" name="number[]" value="10">
<input type="text" name="name[]" value="서태웅"> <input type="text" name="number[]" value="11">
<input type="text" name="name[]" value="정대만"> <input type="text" name="number[]" value="14">
<input type="text" name="name[]" value="송태섭"> <input type="text" name="number[]" value="7">
선수이름 | 번호
이렇게 한꺼번에 저장해서
ajax를 사용하려고 하는데
자바스크립트에서 객체로 어떻게 저장할 수 있을까요?
1줄을 객체로 만들고 배열로 데이터를 넣으면 될거 같은데
각각의 데이터를 자바스크립에서 어덯게 불러오는지 궁금합니다.
답변 2
<?php
if (empty($_POST) == false) {
// print_r($_POST);
$names = $_POST['name'];
$numbers = $_POST['number'];
foreach ($names as $k => $v) {
$value = $names[$k] . ' | ' . $numbers[$k];
echo $value . PHP_EOL;
}
exit();
}
?>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
function make_array_data(arrname) {
var arr = [];
var els = document.getElementsByName(arrname);
els.forEach(function (el, idx) {
arr.push(el.value);
});
return arr;
}
function async_senddata() {
var datas = {};
datas['name[]'] = make_array_data('name[]');
datas['number[]'] = make_array_data('number[]');
$.ajax({
url: location.pathname,
method: 'POST',
data: datas
}).done(function (msg) {
console.log(msg);
});
}
</script>
<ul>
<li><input type="text" name="name[]" value="강백호"> <input type="text" name="number[]" value="10"></li>
<li><input type="text" name="name[]" value="서태웅"> <input type="text" name="number[]" value="11"></li>
<li><input type="text" name="name[]" value="정대만"> <input type="text" name="number[]" value="14"></li>
<li><input type="text" name="name[]" value="송태섭"> <input type="text" name="number[]" value="7"></li>
<li><input type="button" value="btn" onclick="async_senddata()" /></li>
</ul>
var name = [];
var number = [];
var nameInputs = document.getElementsByName("name[]");
var numberInputs = document.getElementsByName("number[]");
for (var i = 0; i < nameInputs.length; i++) {
name.push(nameInputs[i].value);
}
for (var j = 0; j < numberInputs.length; j++) {
number.push(numberInputs[j].value);
}
name = name.join("|");
number = number.join("|");
이렇게 배열에 담고
ajax 비동기 처리하시면됩니다.
ajax 예제는 팁게에 널려있으니 그중 원하시는걸 참조하셔서 구현하시면됩니다.
https://sir.kr/g5_tip?sca=&sfl=wr_subject%7C%7Cwr_content&stx=ajax
답변을 작성하시기 전에 로그인 해주세요.