2011-09-27 8 views
1

jQuery 게시를 사용하여 양식을 제출하고 동일한 페이지의 div 태그 내에서 데이터를 반환하는 페이지가 있습니다. 양식에 계속 액세스 할 수 있으므로 여러 질문을 사용자에게 요청할 수 있으며 정보는 데이터베이스에서 추출됩니다.jQuery 라디오 버튼 확인 확인

처음으로 사용자가 라디오 버튼을 선택하지 않고 양식을 제출하려고하면 선택을해야한다는 경고 상자가 나타납니다. 그러나 처음부터 사용자가 선택하지 않고 양식을 제출할 수 있습니다.

라디오 버튼의 설정 값이 유지됩니다. 이 형식을 사용할 수있는 방법에 대한 아이디어와 각 양식 제출에서 라디오 버튼이 선택되었는지 확인하십시오. 여기

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"> 
    <html> 
    <head> 

    <title>test jQuery post</title> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script> 
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script> 

    <script type="text/javascript"> 
    //<![CDATA[ 
    jQuery.noConflict(); 

    jQuery(document).ready(function(){ 
     initializeForm(); 
     }); 

    function initializeForm() { 
     jQuery("#university").validate({ 

      debug: false, 
      submitHandler: function(form) { 


      var validationTypes = jQuery("#validationTypes"); 
      var valid = false; 


         if (validationTypes.val()== 'radio') 
          { 
           for(i=0; i<university.radio.length; i++) if(university.radio[i].checked) {valid=true;} 

           if (valid == false) 
             { 
              alert ("Please pick an answer before trying to Submit this form."); 
              return false; 
             } 

          } 


       jQuery.post('post.php', 
        jQuery("#university").serialize(), 
        function(data) { 
         jQuery('#box').html(data); 
         initializeForm(); 

        }); 

      } 

     }); 
     } 



    // ]]> 
    </script> 
    </head> 
    <body> 
    <div id="box"><? include('post.php') ?></div> 
    </body> 
    </html> 

<? 

$radio = (isset($_POST['radio'])? $_POST['radio']: 0); 
    switch ($radio) 
     { 
      default: 
      echo 'pick a number<br /><br />'; 
      break; 
      case '1': 
      echo 'you pick one<br /><br />Pick Again<br /><br />'; 
      break; 
      case '2': 
      echo 'you pick two<br /><br />Pick Again<br /><br />'; 
      break; 
      case '3': 
      echo 'you pick three<br /><br />Pick Again<br /><br />'; 
      break; 
     } 
?> 
<form action="" method="POST" id="university" name="university"> 
<input type="radio" name="radio" value="1" /> 1&nbsp;&nbsp; 
<input type="radio" name="radio" value="2" /> 2&nbsp;&nbsp; 
<input type="radio" name="radio" value="3" /> 3&nbsp;&nbsp; 
<input type="hidden" name="validationTypes" id="validationTypes" value="radio"> 
<input type="submit" name="submit" value="submit" /></form> 
+0

는 사용자가 제출 한 후 양식을 청소할 : 그리고 다음과 같은 값을 청소하는 것을 사용? –

+0

submitHandler에서 어디에서나 정의 된 'university'가 표시되지 않습니다. 'document.university'를 사용하고 싶습니까? 자바 스크립트 오류가 발생하고 있습니까? – RoccoC5

+0

세르지오, 양식을 청소하지 않습니까? 제출 한 후에 ... 그게 무슨 뜻인지 모르겠다. – simian

답변

1

내가 유효성 검사 (jQuery("#university").validate)에 대한 이벤트 핸들러를 생각 post.php 두 번째 페이지가 test.php 여기

는 여전히 부착되어 첫 번째 페이지입니다 양식을 제출 한 후 방금 바꾼 HTML ( jQuery('#box').html(data)).

그래서이 경우에는 내가 문제를 해결할 생각이 옵션에서 생각할 수 있습니다 :

  1. 쉬운 해결 방법 : post.php 페이지 내부에 자바 스크립트의이 부분을 이동 (그래서 실행 있어요

    jQuery(document).ready(function(){ 
        initializeForm(); 
    }); 
    
  2. 성능이 좋은 솔루션을 : 때마다 당신은) 양식을로드 "box"을 닫는 아래에 post.php 페이지에 HTML을 이동 div test.php 페이지에서 확인하십시오.

    $('input[name=radio]').val([]);