채택완료

버튼 클릭시 value값 전달에 대해 문의드립니다.

아래소스 기준으로 확인 버튼 클릭시 버튼에 value 값이  it_num에 value값에 입력하고 싶은데

어덯게 하면 가능할가요? 소스를 여기저기 찾아봐도 찾을수가 없네요.

 

Copy
<section id="sel_option">
  <ul>
    <li class="opt_list">
      <input class="it_num" type="hidden" value="0">
      <button class="it_btn" type="button" value="50"><span class="sound_only">확인</span></button>
    </li>
    <li class="opt_list">
      <input class="it_num" type="hidden" value="0">
      <button class="it_btn" type="button" value="100"><span class="sound_only">확인</span></button>
    </li>
  </ul>
</section>
|

답변 4개 / 댓글 5개

채택된 답변
+20 포인트

Copy
<section id="sel_option">
  <ul>
    <li class="opt_list">
      <input class="it_num" type="hidden" value="0">
      <button class="it_btn" type="button" data-num="50"><span class="sound_only">확인</span></button>
    </li>
    <li class="opt_list">
      <input class="it_num" type="hidden" value="0">
      <button class="it_btn" type="button" data-num="100"><span class="sound_only">확인</span></button>
    </li>
  </ul>
</section>

 

<script>
$(function() {
    $('.it_btn').on('click', function() {
        var num = $(this).data('num');    
        $(this).closest('li').find('.it_num').val(num);
    });
});
</script>

답변에 대한 댓글 4개

한가지 더 도움 부탁드립니다.
<input class="it_num[33312][]" type="hidden" value="0"> 이렇게 it_num 배열값으로 돼있을때 $(this).closest('li').find('.it_num').val(num); 이소스를 어덯게 수정해서 사용해야될가요?
$(this).closest('li').find('input').val(num);
답변 감사합니다.
근데 input “li”안에 여러개 있는 상황이라 ㅠㅠ
$(this).closest('li').find('[class^=it_num]').val(num);

질문의 경우 버튼 바로 앞에 위치하니까 아래처럼 간단하게 지정 가능합니다. * DOM 공부 추천

Copy
$('.it_btn').on('click', function() {
    $(this).prev().val($(this).data('num'));
});

jquery로 간단하게 하시는게 좋아보여요

간단하게 샘플만들어봤어요. 다음URL에서 확인해보세요.

https://www.webgift.kr/0729/sample1.php

 

 

Copy
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


<section id="sel_option">
  <ul>
    <li class="opt_list">
      <input class="it_num" type="hidden" value="0">
      <button class="it_btn" type="button" data-num="50"><span class="sound_only">확인</span></button>
    </li>
    <li class="opt_list">
      <input class="it_num" type="hidden" value="0">
      <button class="it_btn" type="button" data-num="100"><span class="sound_only">확인</span></button>
    </li>
  </ul>
</section>
 
<script>
$(function() {
    $('.it_btn').on('click', function() {
        var num = $(this).data('num');    
        $(this).parent('li').find('.it_num').val(num);
    });
});
</script>

 

답변에 대한 댓글 1개

ㅋㅋ 넵 어쩔수없죠 도움이 되셨다면 그것으로도 좋은것 같아요 :)

<button id="demo" onclick="myFunction()" value="50">Go</button>

<input id="demo1" type="hidden" value="">

<script>

function myFunction() {

var str = document.getElementById("demo").value; 

document.getElementById("demo1").value = str;

}

</script>

답변을 작성하려면 로그인이 필요합니다.