버튼 폼 전송 질문입니다.
본문
버튼이 submit 형태면 클릭을 하면 name 값과 value 값이 같이 전송이 되면서 주소표시줄에 찍히는데요.
아래처럼 버튼으로 만들어서 전송을 할 경우 클릭한 버튼의 name 값과 value 값 전달은 어떻게 해야 될까요?
<div class="btn_wr">
<div>
<input id="ud_submit" type="button" name="act_type_button" value="가죽출고" class="btn_submit a">
<input id="ud_submit" type="button" name="act_type_button" value="가죽입고" class="btn_submit b">
<input id="ud_submit" type="button" name="act_type_button" value="가죽불량" class="btn_submit c">
<input id="ud_submit" type="button" name="act_type_button" value="불량처분" class="btn_submit d">
<input id="ud_submit" type="button" name="act_type_button" value="불량복구" class="btn_submit e">
</div>
</div>
</form>
<script>
$(function() {
$('.btn_submit').click(function(){
$("#frm_submit").submit();
});
});
</script>
답변 1
frm_submit 폼의 다른 여러값과 동시에 전송할려면,
1. hidden 필드를 추가 합니다.
2. 버튼 클릭시 이벤트를 받아서 클릭한 버튼의 정보를 hidden 필드 값으로 설정합니다.
3. form submit 을 진행합니다.
코드는 아래와 같습니다.
<form id="btn_submit" method="POST">
<div class="btn_wr">
<input type="hidden" name="button_name" value=""/>
<input type="hidden" name="button_value" value=""/>
<div>
<input id="ud_submit1" type="button" name="act_type_button" value="가죽출고" class="btn_submit a" />
<input id="ud_submit2" type="button" name="act_type_button" value="가죽입고" class="btn_submit b" />
<input id="ud_submit3" type="button" name="act_type_button" value="가죽불량" class="btn_submit c" />
<input id="ud_submit4" type="button" name="act_type_button" value="불량처분" class="btn_submit d" />
<input id="ud_submit5" type="button" name="act_type_button" value="불량복구" class="btn_submit e" />
</div>
</div>
</form>
<script>
$(function() {
$('.btn_submit').click(function(){
var button_name = $(this).attr("name");
var button_value = $(this).val();
alert("button_name=" + button_name + ", button_value=" + button_value);
$("input[name=button_name]").val(button_name);
$("input[name=button_value]").val(button_value);
$("#frm_submit").submit();
});
});
</script>
테스트는 여기서 해보세요.
https://jsfiddle.net/vr6qmjc2/1/
감사합니다!