2016-07-13 3 views
2

문제 내 제출 단추가 어떤 이유로 작동하지 않습니다. 몇 가지 console.log가 있지만 문제가 무엇인지 확실하지 않은 피드백을받지 못했습니다. 브라우저에서 오류가 발생하지 않습니다. 가 여기에 codepen 예제 : http://codepen.io/coryk/pen/kXxzXv?editors=1111제출 단추가 작동하지 않습니다.

HTML

<div class="top-content"> 
     <div class="inner-bg"> 
      <div class="container"> 
       <div class="row"> 
        <!-- Header Text  --> 
        <div class="col-sm-10 text"> 
         <h1><strong>SAGA</strong> Data Form</h1> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="col-sm-6 form-box"> 
         <div class="form-top"> 
          <div class="form-top-left"> 
           <h3>Enter Data Below</h3> 
           <p>Please Enter Data to be converted</p> 
          </div> 
          <div class="form-top-right"> 
           <i class="fa fa-rocket"></i> 
          </div> 
         </div> 
         <div class="form-bottom"> 
          <form action="" class="login-form" method="post" role="form"> 
           <div class="form-group"> 
            <form id="add_name" name="add_name"> 
             <div class="table-responsive"> 
              <table class="table table-bordered" id="dynamic_field"> 
               <!-- Form Titles  --> 
               <tr> 
                <td> 
                 <p style="text-align: center;"><strong>Select Unit Conversion</strong></p> 
                </td> 
                <td> 
                 <p style="text-align: center;"><strong>Enter Unit</strong></p> 
                </td> 
                <td> 
                 <p style="text-align: center;"><strong>Enter Percent Finer</strong></p> 
                </td> 
               </tr><!-- Form Elements  --> 
               <tr> 
                <td><select class="unit selectpicker show-tick form-control" data-live-search="true" id="basic"> 
                 <option value="mm"> 
                  Millimeters 
                 </option> 
                 <option value="micron"> 
                  Micron 
                 </option> 
                 <option value="phi"> 
                  Phi 
                 </option> 
                 <option value="inches"> 
                  Inches 
                 </option> 
                 <option value="Mesh"> 
                  Mesh Size 
                 </option> 
                </select></td> 
                <td><input class="form-control name_list" id="unitVal" name="name[]" placeholder="Enter Unit Here" type="text" value="75000"></td> 
                <td><input class="form-control name_list" id="percent" name="name[]" placeholder="Enter Percent Finer Here" type="text" value="100"></td> 
                <td><button class="btn btn-success" id="add" name="add" type="button">Add More</button></td> 
               </tr> 
              </table> 
             </div> 
            </form> 
           </div><button class="btn" id="sub" type="submit">Submit</button> 
          </form> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 

자바 스크립트

$(document).ready(function(){ 
    // 
     var micronConv, val, incheConv, meshCov; 
     var percentFiner = parseInt($("#percent").val()); 

    $('#sub').click(function(){ 
       var unitValue = parseInt($("#unitVal").val()); 
       var selectedOption = $('.unit option:selected').text(); 
          if(selectedOption === "micron"){ 
             if (unitValue === 0 || null){ 
              unitValue = null; 
             }else{ 
              unitValue = unitValue/1000; //convert to mm 
              micronConv = -Math.log2(unitValue); //convert to Phi 
               console.log(micronConv,percentFiner); 
             } 
        } else if (selectedOption === "inches"){ 
          val = Math.round(unitValue * 25.4); //convert to mm 
          incheConv = -Math.log2(val); //convert to Phi 
              console.log(incheConv,percentFiner); 
        } else if (selectedOption === "Mesh"){ 
           if (unitValue === 2.5){       //convert to mm 
            unitValue = -Math.log2(8.00); //convert to Phi 
           } else if(unitValue === 3){ 
            unitValue = -Math.log2(6.730); 
           } else if(unitValue === 4) { 
            unitValue = -Math.log2(4.760); 
           } else if (unitValue === 5){ 
            unitValue = -Math.log2(4.000); 
           } else if (unitValue === 6){ 
            unitValue = -Math.log2(3.360); 
           } else if (unitValue === 7){ 
            unitValue = -Math.log2(2.830); 
           } else if (unitValue === 8){ 
            unitValue = -Math.log2(2.38); 
           } else if (unitValue === 10){ 
            unitValue = -Math.log2(2.000); 
           } else if (unitValue === 12){ 
            unitValue = -Math.log2(1.680); 
           } else if (unitValue === 14){ 
            unitValue = -Math.log2(1.410); 
           } else if (unitValue === 16){ 
            unitValue = -Math.log2(1.190); 
           } else if (unitValue === 18){ 
            unitValue = -Math.log2(1.000); 
           } else if (unitValue === 20){ 
             unitValue = -Math.log2(0.841); 
           } else if (unitValue == 25){ 
            unitValue = -Math.log2(0.707); 
           } else if (unitValue === 30){ 
            unitValue = -Math.log2(0.595); 
           } else if (unitValue === 35){ 
            unitValue = -Math.log2(0.500); 
           } else if (unitValue === 40){ 
            unitValue = -Math.log2(0.400); 
           } else if (unitValue === 45){ 
            unitValue = -Math.log2(0.354); 
           } else if (unitValue === 50){ 
            unitValue = -Math.log2(0.297); 
           } else if (unitValue === 60){ 
            unitValue= -Math.log2(0.250); 
           } else if (unitValue === 70){ 
            unitValue = -Math.log2(0.210); 
           } else if (unitValue === 80){ 
            unitValue = -Math.log2(0.177); 
           } else if (unitValue === 100){ 
            unitValue = -Math.log2(0.149); 
           } else if (unitValue === 120){ 
            unitValue = -Math.log2(0.125); 
           } else if (unitValue === 140){ 
            unitValue = -Math.log2(0.105); 
           } else if (unitValue === 170){ 
            unitValue = -Math.log2(0.088); 
           } else if (unitValue === 200){ 
            unitValue = -Math.log2(0.074); 
           } else if (unitValue === 230){ 
            unitValue = -Math.log2(0.063); 
           } else if (unitValue === 270){ 
            unitValue = -Math.log2(0.053); 
           } else if (unitValue === 325){ 
            unitValue = -Math.log(0.044); 
           } else if (unitValue === 400){ 
            unitValue = -Math.log2(0.037); 
           } else if(unitValue >= 401) { 
            unitValue = "Not A Valid Size"; 
           } 
           meshCov = unitValue; 
        } 

     }); 
}); 
+2

양식 태그 전에 폼 요소가 마십시오 HTML과 HTML –

+2

의 끝을 시작 추가? 버튼이 아닌 양식이 제출됩니다. – Teemu

+1

제출할 양식이 없습니다 – Rikin

답변

1

최종 CODE :
놓습니다 <form>에서 <button> :
편집 : 당신은 "마이크론"을 선택한 텍스트를 비교하고 있지만 당신이를 교체하거나 그래서, 실제로는 "마이크론"나
PS : 당신의 코드가 있어야한다, 그래서 경우를 (/ 마이크론/I) 무시하는 정규 표현식을 사용하여 직접 양식의 닫는 태그를 양식 내부의 버튼을 넣어 : </button></form>
HTML :

<div class="top-content"> 
    <div class="inner-bg"> 
     <div class="container"> 
      <div class="row"> 
           <!-- Header Text  --> 
       <div class="col-sm-10 text"> 
        <h1><strong>SAGA</strong> Data Form</h1> 
       </div> 
           </div> 

      <div class="row"> 
       <div class="col-sm-6 form-box"> 

        <div class="form-top"> 
         <div class="form-top-left"> 
          <h3>Enter Data Below</h3> 
          <p>Please Enter Data to be converted</p> 
         </div> 
         <div class="form-top-right"> 
          <i class="fa fa-rocket"></i> 
         </div> 
        </div> 

        <div class="form-bottom"> 
         <form action="" class="login-form" method="post" role="form"> 
          <div class="form-group"> 
           <form id="add_name" name="add_name"> 
            <div class="table-responsive"> 


             <table class="table table-bordered" id="dynamic_field"> 
                          <!-- Form Titles  --> 
              <tr> 
                              <td><p style="text-align: center;"><strong>Select Unit Conversion</strong></p></td> 
                              <td><p style="text-align: center;"><strong>Enter Unit</strong></p></td> 
                              <td><p style="text-align: center;"><strong>Enter Percent Finer</strong></p></td> 
                          </tr> 
                         <!-- Form Elements  --> 
                          <tr> 
                              <td><select id="basic" class="unit selectpicker show-tick form-control" data-live-search="true"> 
                              <option value="mm">Millimeters</option> 
                              <option value="micron">Micron</option> 
                              <option value="phi">Phi</option> 
                              <option value="inches">Inches</option> 
                              <option value="Mesh">Mesh Size</option> 
                              </select></td> 
                              <td><input id="unitVal" value="75000" class="form-control name_list" name="name[]" placeholder="Enter Unit Here" type="text"></td> 
                              <td><input value="100" id="percent" class="form-control name_list" name="name[]" placeholder="Enter Percent Finer Here" type="text"></td> 
                 <td><button class="btn btn-success" id="add" name="add" type="button">Add More</button></td> 
              </tr> 
             </table> 
            </div><button id="sub" class="btn" type="submit">Submit</button> 
           </form> 
          </div> 
         </form> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

JS : 마이크론과의 예

if(selectedOption === "Micron"){ 
    // DO calc-s 
} else if (selectedOption === "Inches"){ // DO calc-s } 
    else if (selectedOption === "Mech Size"){ // DO calc-s } 

결과 :
enter image description here

+0

아직 콘솔이 없습니다. 로그 가치가 있습니다. 어제 일 했었지만 오늘 아침에 들어 왔습니다. 죽었어 .. –

+0

하지만 게시 중입니다. –

+0

하지만 날씨를 알기위한 피드백을 얻으려면 어떻게해야합니까? 아니면 console.log가없는 상태에서 내 코드가 제대로 계산되지 않았습니까? –

1

양식 태그를 추가 form

<form action="" method="post" /> 
<div class="top-content"> 
     <div class="inner-bg"> 
      <div class="container"> 
       <div class="row"> 
        <!-- Header Text  --> 
        <div class="col-sm-10 text"> 
         <h1><strong>SAGA</strong> Data Form</h1> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="col-sm-6 form-box"> 
         <div class="form-top"> 
          <div class="form-top-left"> 
           <h3>Enter Data Below</h3> 
           <p>Please Enter Data to be converted</p> 
          </div> 
          <div class="form-top-right"> 
           <i class="fa fa-rocket"></i> 
          </div> 
         </div> 
         <div class="form-bottom"> 
          <form action="" class="login-form" method="post" role="form"> 
           <div class="form-group"> 
            <form id="add_name" name="add_name"> 
             <div class="table-responsive"> 
              <table class="table table-bordered" id="dynamic_field"> 
               <!-- Form Titles  --> 
               <tr> 
                <td> 
                 <p style="text-align: center;"><strong>Select Unit Conversion</strong></p> 
                </td> 
                <td> 
                 <p style="text-align: center;"><strong>Enter Unit</strong></p> 
                </td> 
                <td> 
                 <p style="text-align: center;"><strong>Enter Percent Finer</strong></p> 
                </td> 
               </tr><!-- Form Elements  --> 
               <tr> 
                <td><select class="unit selectpicker show-tick form-control" data-live-search="true" id="basic"> 
                 <option value="mm"> 
                  Millimeters 


             </option> 
                <option value="micron"> 
                 Micron 
                </option> 
                <option value="phi"> 
                 Phi 
                </option> 
                <option value="inches"> 
                 Inches 
                </option> 
                <option value="Mesh"> 
                 Mesh Size 
                </option> 
               </select></td> 
               <td><input class="form-control name_list" id="unitVal" name="name[]" placeholder="Enter Unit Here" type="text" value="75000"></td> 
               <td><input class="form-control name_list" id="percent" name="name[]" placeholder="Enter Percent Finer Here" type="text" value="100"></td> 
               <td><button class="btn btn-success" id="add" name="add" type="button">Add More</button></td> 
              </tr> 
             </table> 
            </div> 
           </form> 
          </div><button class="btn" id="sub" type="submit">Submit</button> 
         </form> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
,

관련 문제