2012-01-03 3 views
0

입력 값을 기반으로 포인트를 계산하는 포인트 계산 시스템을 구축 중입니다. 저는이 라디오 버튼에 몇 가지 jquery UI 스타일을 사용했고, 이제는 전체적으로 더해지지 않습니다. 코드가 너무 길어 여기에 게시 할 수 없으므로 live preview을 확인하십시오. 나는 많은 시간 cou를 통해 코드를 읽고, ldnt는 무엇이든을 찾는다.라디오 버튼 값이 파싱되지 않았습니다.

편집 : 내 코드는 아래 코드에서 제외되었습니다. 문제는 div 2의 라디오 버튼과 관련되어 있습니다. 제 의견을 읽어주십시오.

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Quebec and Federal Immigration Points Calculator</title> 
    <link rel="stylesheet" href="files/jquery00.css"> 
    <link rel="stylesheet" href="files/flexselect.css"> 
    <link rel="stylesheet" href="files/demos000.css"> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script> 
    <script src="files/liquidmetal.js"></script> 
    <script src="files/jquery.flexselect.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
      $(document).ready(function() { 
      $("select.flexselect").flexselect(); 
      $(".radio").buttonset();//here they are made into jquery ui buttonsets 
      $('#part1').show('slow', function() { 
      }); 
      }); 
    </script> 
    <script type="text/javascript"> 
    function showAge(){ 
    var d =document.getElementById('dob').value.split('/'); 
    var today = new Date(); 
    var bday = new Date(d[2],d[1],d[0]); 
    var age = today.getFullYear() - bday.getFullYear(); 
    if(today.getMonth() < bday.getMonth() || (today.getMonth() == bday.getMonth() && today.getDate() < bday.getDate())) 
    { 
     t = age-1; 
    } 
    else { 
    t = age 
    } 
    document.getElementById('form').age.value = t; 
    } 
    </script> 
    <script type="text/javascript"> 
    function compute(form) 
    { 
    var a = parseInt(document.getElementById('form').age.value, 10) || 0; 
    if ((18 <= a) && (a <= 35)){ 
     q = 16; 
    } 
    else if (a == 36){ 
     q = 14; 
    } 
    else if (a == 37){ 
     q = 12; 
    } 
    else if (a == 38){ 
     q = 10; 
    } 
    else if (a == 39){ 
     q = 8; 
    } 
    else if (a == 40){ 
     q = 6; 
    } 
    else if (a == 41){ 
     q = 4; 
    } 
    else if (a == 42){ 
     q = 2; 
    } 
    else if ((18 > a) || (a > 43)){ 
     q = 0; 
    } 
    var b = parseInt(document.getElementById('form').highed.value, 10) || 0; 
    if (b == 1){ 
     c = 0; 
    } 
    else if (b == 2){ 
     c = 2; 
    } 
    else if (b == 3){ 
     c = 4; 
    } 
    else if (b == 4){ 
     c = 6; 
    } 
    var aos = parseInt(document.getElementById('form').selectareaofstudy.value, 10) || 0; 
//here the value of the radiio button is parsed, and if nothing is selected it will default to zero 
    var tcfc2 = parseInt(document.getElementById('form').TCFC2.value, 10) || 0; 
    qt = (aos + c + q + tcfc2); 
    document.getElementById('total').age.value = q; 
    document.getElementById('total').ed.value = c; 
    document.getElementById('total').aos.value = aos; 
    document.getElementById('total').tcfc2.value = tcfc2;//here the value is displayed 
    document.getElementById('total').total.value = qt;//total displayed here 
    } 
    </script> 
    <script type="text/javascript"> 
    function show2() { 
     $('#part1').hide('fast'); 
      $('#part2').show('slow'); 
    } 
    function back2() { 
     $('#part1').show('slow'); 
      $('#part2').hide('fast'); 
    } 
    function showTCF() { 
    if($('#radio1-1').is(':checked')) { alert("it's checked"); } 
    } 
    </script> 
    </head> 
    <body> 
    <div id="formbox"> 
     <form id="form" name="form"> 
     <div id="part1" style="display:none"> 
      <div id="hidden"> 
      <p>Your Date of Birth (format:<strong>dd/mm/yyyy</strong>)</p> 
      <br /> 
      <input onBlur="compute(this.form)" onchange="showAge()" name="dob" id="dob" /> 
      </div> 
      <p>Your Age</p> 
      <input class="sev" name="age" type="text" onMouseOver="compute(this.form)" style="font-size: 15px" value="" size="7" /> 
      <h1>Your education</h1> 
      <h2>Your highest level of Education:</h2> 
      <select onchange="compute(this.form)" name="highed"> 
      <option value="">Select One</option> 
      <option value="1">No high school diploma or general Professional</option> 
      <option value="2">High school general diploma +2 or 12th grade</option> 
      <option value="3">Postsecondary diploma 2 years general of full-time studies</option> 
      <option value="4">Postsecondary technical diploma 1 year of full-time studies</option> 
      <option value="4">Postsecondary technical diploma 2 years of full-time studies</option> 
      </select> 
      <h2>Your Area of Education:<small>(start typing..)</small></h2> 
      <select class="flexselect" name="selectareaofstudy"> 
      <option value=""></option> 
      <option value="6">3D Animation and Image Synthesis Techniques (DCS - 3 years) </option> 
      <option value="6">LOADS OF OTHER VALUES HERE</option> 
      </select> 
      <br /> 
      <br /> 
      <INPUT class="ten" NAME="calc" VALUE="Calculate" TYPE="button" onClick="compute(this.form)"> 
      &nbsp;&nbsp; 
      <INPUT class="ten" NAME="calc" VALUE="Next" TYPE="button" onClick="show2()"> 
      <br /> 
     </div> 
     <div id="part2" style="display:none"> 
      <h2>French Proficiency</h2> 
      <p>Have you written: <strong>TCF Quebec/ TEFaQ/ TCF/ TEF level C2- DALF C2?</strong> </p> 
      <div id="radio1" class="radio"> 
<!--These radio buttons have values of 1 and 2 but when calculated they always show up as zero, the default values.--> 
      <input id="radio1-1" name="TCFC2" type="radio" value="1" checked="checked" /> 
      <label for="radio1-1">Yes</label> 
      <input id="radio1-2" name="TCFC2" type="radio" value="2" /> 
      <label for="radio1-2">No</label> 
      </div> 
      <br /> 
      <br /> 
      <br /> 
      <INPUT class="ten" NAME="calc" VALUE="Calculate" TYPE="button" onClick="compute(this.form)"> 
      &nbsp;&nbsp; 
      <table> 
      <tr> 
       <td><INPUT class="ten" NAME="calc" VALUE="Back" TYPE="button" onClick="back2()"></td> 
       <td><INPUT class="ten" NAME="calc" VALUE="Next" TYPE="button" onClick="show3()"></td> 
      </tr> 
      </table> 
     </div> 
     </form> 
    </div> 
    <div style="" id="totalmenu" class="port-menu-wrapper"> 
     <form id="total"> 
     <h3>Points For</h3> 
     <table> 
      <tr> 
      <td><label>Age</label></td> 
      <td><input class="sev" name="age" type="text" style="font-size: 15px" value="" size="7" readonly></td> 
      </tr> 
      <tr> 
      <td><label style="font-size: 18px">Your Education</label></td> 
      </tr> 
      <tr> 
      <td><label>Education 1</label></td> 
      <td><input class="sev" name="ed" type="text" style="font-size: 15px" value="" size="7" readonly></td> 
      </tr> 
      <tr> 
      <td><label>Area of Study</label></td> 
      <td><input class="sev" name="aos" type="text" style="font-size: 15px" value="" size="7" readonly></td> 
      </tr> 
      <tr> 
      <td><label style="font-size: 18px">French Proficiency</label></td> 
      </tr> 
      <tr> 
      <td><label>TCFC2</label></td> 
      <td><input class="sev" name="tcfc2" type="text" style="font-size: 15px" value="" size="7" readonly></td> 
      </tr> 
      <tr> 
      <td><label style="font-size:20px;"><strong>Total</strong></label></td> 
      <td><input class="ten" name="total" type="text" style="font-size: 20px" value="" size="10" readonly></td> 
      </tr> 
     </table> 
     </form> 
    </div> 
    </body> 
    </html> 
+0

여기에 글을 게시하십시오 그래서 누구든지 당신을 도울 수 있습니다. – adatapost

+0

우선주의해야 할 것은'j는 정의되지 않았습니다'와'show3 is not defined'가 있습니다. 또한 어떻게 작동해야합니까? 정확히 작동하지 않는 것은 무엇입니까? 우리는 더 많은 정보가 필요합니다. – Chad

+0

c는 if..else 문에 정의되어 있지만 show 3은 나중에 정의해야합니다. – jackson5

답변

4

내가 그것이 JQuery와 UI에 연결되어 생각하지 않지만, 당신이 TCFC2라는 라디오 버튼 2 개 요소를 가지고 라인

var tcfc2 = parseInt(document.getElementById('form').TCFC2.value, 10) || 0; 

에, 배열은 그들과 함께 생성된다. 또한이 값은 첫 번째 라디오의 경우 항상 1이고 두 번째 라디오의 경우에는 2입니다. 사람들이 불어로 말할 때 식별 할 수있는 값이 아니라 "checked"속성을 확인해야합니다.

var tcfc2 = document.getElementById('form').TCFC2[0].checked -0 ; 

"true"또는 "false"가 반환되는 것처럼 parseInt가 반환되지 않으며 "-0"은 int 변환을 강제하는 것입니다.

마지막으로, 라디오 이름이나 입력 유형 텍스트의 이름을 TCFC2 이외의 이름으로 변경했습니다. (그리고 당신의 CSS를 병합하고, html 파일에서 스크립트와 스타일을 가져 와서 유지 관리 스테이크 용으로 자신의 파일에 넣고, a, b, c보다 의미있는 이름을 지정하십시오.)

+0

예를 들어 두 점, 아니요를 1 점을 포기하고 합계에 추가하려면 어떻게해야합니까? – jackson5

+0

'var tcfc2 = document.getElementById ('form'). TCFC2 [0] .checked -0 +1;'또는'var tcfc2 = document.getElementById ('form'). TCFC2 [0] .checked? 2 : 1; ' – roselan

+0

aight thx that works : D – jackson5

관련 문제