라디오버튼 체크가 안되어 있을 시 팝업
본문
<tr>
<th scope="row">선택</th>
<td>
<label id="1class"><input type="radio" name="wr_2" value="1선택" <? if($_GET['wr_2'] == "1선택"){ echo 'checked'; } ?> required> 1선택</label>
<label id="2class"><input type="radio" name="wr_2" value="2선택" <? if($_GET['wr_2'] == "2선택"){ echo 'checked'; } ?> required> 2선택</label>
<label id="3class"><input type="radio" name="wr_2" value="3선택" <? if($_GET['wr_2'] == "3선택"){ echo 'checked'; } ?> required> 3선택</label>
<label id="4class"><input type="radio" name="wr_2" value="4선택" <? if($_GET['wr_2'] == "4선택"){ echo 'checked'; } ?> required> 4선택</label>
<label id="5class"><input type="radio" name="wr_2" value="5선택" <? if($_GET['wr_2'] == "5선택"){ echo 'checked'; } ?> required> 5선택</label>
<label id="6class"><input type="radio" name="wr_2" value="6선택" <? if($_GET['wr_2'] == "6선택"){ echo 'checked'; } ?> required> 6선택</label>
</td>
</tr>
<input type='submit'value="확인" width="300" height="50" align=absmiddle>
이렇게 라디오버튼을 만들었는데, 확인버튼(서브밋)하면 페이지가 넘어가는 구조입니다.
여기서 아무것도 선택이 되지 않았을 때, 팝업으로 메세지를 띄우려고 하는데, 방법이 있을까요?
글쓰기나 이런 페이지가 아니라 메인페이지에서 바로 선택해서 해당 페이지로 넘어가는 구조입니다.
답변 1
<script>
$("input[type='submit']").on("click", function() {
if(!$('input[name="wr_2"]').is(':checked')){
alert('선택해주세요');
return false;
}
});
</script>
아 감사합니다 ^^ 또한가지만 질문드려도 될까요 ㅠㅠ?
서브밋할때 로딩이 되어서 클릭 시 로딩화면이 뜨게 해놓았는데,
지금 alert경고창이뜨고 확인을 누르면 로딩화면이 떠버리는데 이부분은 어떻게 막을까요 ㅠㅠ?
<div class="loading_fix">
<div class="loadingio-spinner-spin-mfu5m1x4o5"><div class="ldio-2fuq1qb4hi4">
<div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div>
</div></div>
</div>
<script>
$(document).ready(function(){
$("input[value='확인']").click(function(){
$(".loading_fix").fadeIn(300);
});
});
$(document).keydown(function(e){
var code = e.keyCode || e.which;
if (code == 116) {
$('.loading_fix').fadeIn(300);
}
});
</script>
로딩화면을 이렇게 구현해놓았습니다.
체크된값이 없으면
로딩이벤트를 중지하거나
로딩을 숨기면될것같습니다
alert('선택해주세요', 도메인);
이런식으로 하는법은 알겠는데... 클래스에 스타일을 지정하거나 하는방법은 따로 모르겠어서요 ㅠㅠ
$('.loading_fix').hide(); 넣어보시거나
$('.loading_fix').fadeOut('fast'); 넣어보실레요?
$("input[type='submit']").on("click", function() {
if(!$('input[name="wr_2"]').is(':checked')){
alert('선택해 주세요.');
return false;
$('.loading_fix').hide();
}
});
이렇게 넣어보았는데 안되네요 ㅠㅠ
형식으로는 만약, wr_2에 체크된 값이 없을때 메세지가뜨고 확인을 누르면 하이드 하라는건데 맞는거같은데요 ㅠ
$("input[type='submit']").on("click", function() {
if(!$('input[name="wr_2"]').is(':checked')){
$('.loading_fix').hide();
alert('선택해 주세요.');
return false;
}
});
도움주셔서 감사합니다 ㅠㅠ ㅎㅎ 하지만 해결이 안되네요 ㅠㅎ 제가 여러가지 참고해보면서 진행해보겠습니다 너무 감사합니다 ㅎ
네 직접 소스를전체적으로봐야지 해결가능할것같습니다.
아문제점을 발견했는데, 로딩화면은 head.php에 있고, 서브밋하는 건 index.php에 있어서 그런거 같네요.....
페이지전체로드할때 안에 넣으니 되네요 ㅎㅎ 감사합니다 ㅎ