2014-03-31 4 views
1

아무 것도 선택되어 있지 않을 때 제출하지 말고 하나를 선택하면 제출해야합니까? 현재 어느 쪽이든 제출 중입니다. 내가 여기서 무엇을 놓치고 있니? 아무 것도 선택하지 않은 경우 오류가 표시됩니다. 위의 옵션 중 하나를 선택하십시오. 그런 다음 방문 페이지로 이동합니다. 어떤 도움을 주셔서 감사합니다!아무 것도 선택하지 않은 경우 라디오 버튼 양식을 제출하지 못하게하십시오 jquery

$(document).ready(function() { 
    $("#submitbutton").click(function() { 
     var none_answered = true; 
     $("input:radio").each(function() { 
      var name = $(this).attr("name"); 
      if ($("input:radio[name]:checked").length == 0) { 
       none_answered = false; 
      } 
     }); 
     if (none_answered == false) { 
      $('#texthere').html("Please check one of the options above"); 
     } 
    }) 
}); 

<style type="text/css"> 


#texthere 
{ 
    color:red; 
} 

</style> 

<body> 
    <form> 
     <input type="radio" name="refer" value="Strategic Communication" >Strategic Communication</br> 
     <input type="radio" name="refer" value="Journalism" >Journalism</br> 
     <input type="radio" name="refer" value="Communication Studies" >Communication Studies</br> 
     <div id="texthere"></div> 

     <input id="submitbutton" type="submit" value="submit" formaction="http://www.utah.edu/"> 
    </form>  
</body> 

답변

1

기본 동작을 방지하려면 .preventDefault()을 사용하십시오. 예를 들어, 양식 제출 이벤트 전에 양식 게시 전에 입력 내용의 유효성을 검사하고 오류가있는 경우 양식 제출을 중단하려면 event.preventDefault()를 사용하십시오.

이 시도 :

$(document).ready(function() { 
    $("#submitbutton").click(function (e) { 
     var none_answered = true; 
     $("input:radio").each(function() { 
      var name = $(this).attr("name"); 
      if ($("input:radio[name]:checked").length == 0) { 
       e.preventDefault(); 
       none_answered = false; 
      } 
     }); 
     if (none_answered == false) { 
      $('#texthere').html("Please check one of the options above"); 
     } 
    }) 
}); 

DEMO

관련 문제