2016-07-13 398 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> 

的JavaScript

$(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

最終代碼:
放置<button><form>
編輯:你比較「微米」選定的文本,但它實際上是「美光」,這樣你就可以替換,或使用正則表達式忽略例(/微米/ I),所以你的代碼應該是:
PS:並把按鈕的形式裏面,直接形式的結束標記上面:</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

我還沒有得到任何console.log的值,我昨天上班了,但我今天早上進來它已經死了.. –

+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>