db에서 데이터 받아와 셀렉트박스에 뿌리고 다시 인풋으로 넘겼을때
본문
안녕하십니까?
db에서 데이터를 받아와 셀렉트박스에 뿌리고, 그것을 선택하면 인풋박스도 들어가는 것을
다른 질답에서 보고 구현했습니다.
참고사이트
https://codepen.io/sklee227/pen/gjQewm
그런데 제가 그 페이지를 프린트하거나( 출력하기 버튼을 클릭하여
특정div만 프린트하는 방식) 하면 인풋박스에 입력된
사항들이 빈칸으로 나옵니다.
그래서 A라는 DB에서 넘어와서 구현된 셀렉트박스 값을 선택하면
B라는 DB의 여분필드에 삽입되는 방식을 택하려고 합니다
넘어올 정보는 이름과 주소 두가지입니다.
<td style="height:30px">
<?php
$sql = "select name, add from {$write_table}_A where `wr_id` = '{$wr_id}'";
$result = sql_query($sql);
?>
<select id="name" name="name" onchange="$(this).next().val(this.value)">
<?php while ($row = sql_fetch_array($result)) {?>
<option value="<?php echo $row['name'] ?>" data-name="<?php echo $row['name'] ?>" data-add="<?php echo $row['add'] ?>"><?php echo $row['name'] ?>(<?php echo $row['add'] ?>)</option>
<?php } ?>
</select>
</td>
<script>
$('#name').change(function(){
var name = $(this).find(':selected').data('name');
var add = $(this).find(':selected').data('add);
$("#wr_17").val(name);
$("#wr_18").val(add);
});
</script>
<input type="hidden" name="wr_17" value="<?php echo $wr_17 ?>">
<input type="hidden" name="wr_18" value="<?php echo $wr_18 ?>">
이렇게 짜면 셀렉트 박스에서 이름 선택시
두개의 인풋박스에 이름과 주소 각각의 값이 들어가긴 합니다.
하지만 실제 여분필드에 입력되는 것이 아니고 무슨 짓을 하면 초기화가 됩니다(빈칸)
그래서 여분필드에 아예 저장을해서 띄우는 방식을 택하고자 하는데
여기서 wr_17, wr_18의 여분필드에 A에서 선택한 이름과 주소 값이 각각 들어가게 하려면
어떻게 해야할까요. ㅠ
도움 주신분 소정의 기프티콘이라도 드리겠습니다 ㅠㅠ 도와주세용 ㅠㅠㅠ
답변 3
$('#name').change(function(){
var name = $(this).find(':selected').data('name');
var add = $(this).find(':selected').data('add);
$("#wr_17").val(name);
$("#wr_18").val(add);
$('[name="wr_17"]').val(name);
$('[name="wr_18"]').val(add);
});
// 이렇게 하면요 ?
ㅠㅠㅠ 제이쿼리 진짜 거의 모르는데 님이 달아주신
추가내용 구글링 해 가지고 찾아냈습니다 ㅠ 이제 됩니다. ㅠ
$('#name').change(function(){
var name = $(this).find(':selected').data('name');
var add = $(this).find(':selected').data('add);
$("#wr_17").val(name);
$("#wr_18").val(add);
$('input[name=wr_17]').attr('value',name);
$('input[name=wr_18]').attr('value',add);
});
이렇게 하니깐 value 값에 들어갑니다! 감사합니다!
다행이네요 고생 하셨어요~ ㅋㅋㅋ
var add = $(this).find(':selected').data('add); // 이부분 add 뒤에 ' <- 이거 빠진거 외에는 문제 없어보입니다만
//하지만 실제 여분필드에 입력되는 것이 아니고 무슨 짓을 하면 초기화가 됩니다<- 여기서 무슨짓이 무슨짓일까요 ?ㅋㅋ
<select id="name" name="name" onchange="$(this).next().val(this.value)">
이 빨간 부분도 좀 의아한데 이 셀렉 박스 다음으로 바로 따라오는 필드가 뭐가 있을까요 ?
답변 감사합니다. 복사를 잘못해서 저게 빠졌네요 ㅠㅠ 일단 셀렉트 박스에 뜨는 이름들 중 하나를 클릭하면 인풋박스 두 곳에 값이 잘 불러와지나, 거기서 submit을 하는것도 아니고 수정완료 등 어떤 저장행위(?) 를 하는것이 아니라서 그런지 그냥 껍데기에 내용이 나왔다 사라진다는 의미입니다.
제가 만드는것이 예를 들면 뷰 페이지가 표로 만들어진 신청서 같은 양식이고, 그 양식에 이름과 주소란에 인풋박스를 삽입하고, 상단 셀렉트 박스에서 이름을 선택하면 그 인풋박스에 자동으로 이름과 주소가 입력이 되고, 프린트 버튼을 누르면 print() 함수를 통해 출력을 하고자 함인데, 출력을 누르면 밸류값이 없어 그런가 빈칸으로 출력됩니다 ㅠㅠ(당연한거겠쬬? ㅠㅠ) 지적해주신 빨간부분은 선택할때마다 바뀌게 하기위해서 토글 행위를 한다는 의미였습니다.
프린트 하신다고 해서 값이 없어지지는 않을텐데..
onchange="$(this).next().val(this.value)"> // 이부분을 이렇게 사용하시기 보다는 이부분 onchange 를 없애고
$('#name').change(function(){
var slcValue = $(this).val(); // 이쪽에서 선언하고 작업하시는것이 관리나 가독성이나 더 좋을거 같아요.
var name = $(this).find(':selected').data('name');
테스트 하고 계신 페이지 보면서하면 참 이해가 잘 될거 같은데 , 서술 하신거 보고 답변을 드리자니
참 어렵네요 : )
$('#name').change(function(){
var name = $(this).find(':selected').data('name');
var add = $(this).find(':selected').data('add);
$("#wr_17").val(name); // 혹시 이 부분에 값을
$("#wr_18").val(add);
});
<input type="hidden" id="wr_17" name="wr_17" value="<?php echo $wr_17 ?>"> // 여기에다 부여한다는 의미는 아니시죠?
<input type="hidden" id="wr_18" name="wr_18" value="<?php echo $wr_18 ?>">
그렇게 하시려면 .. 위에 숨겨진 필드에 저 두 id 를 추가 해야합니다.
엌ㅋ ㅠㅠㅠ 인풋타입이 hidden이 아니고 text 며 저 인풋박스에 넣는다는 의미 맞습니다.. 이상하게 적어놨네 ㅠㅠ 알려주신 slcValue는 정상적으로 잘 작동하는데 여전히 프린트를 누르면 인풋박스 안이 초기화 되면서 그 후는 셀렉트 박스가 작동되지 않습니다. ㅠㅠ
지금도 친절히 알려주셔서 너무 ㅠㅠ 감사한데 조금만 더 힌트를 주실 수 있나요? ㅠㅠ
좌표 주시면 살펴보고 쓸만한 답변 드릴게요 . ^^
방금까지 돌려본? 결과
셀렉트 박스의 이름을 선택하면
겉으로 보이는 인풋박스에 내용은 뜨지만
wr_17과 wr_18 인풋박스의 value 값은 바뀌지 않았습니다.
<input id="wr_17" name="wr_17" value> //선택해도 이렇게 뜹니다.
그래서 개발자 모드로 크롬에서 임의로 value 값을 넣어서 출력버튼을 눌렀더니 지워지지 않고
<input id="wr_17" name="wr_17" value="홍길동"> //임의로 입력
출력이 되더라고요 그래서 셀렉트 박스를 선택할때 인풋박스에 이름과 주소가 뜨면서
그 내용이 각각의 value 값으로 들어가게 할 수 있을까요? 좌표는 한번 만들어보겠습니당!
감사합니다!
