計算和自動更新基礎上填寫的jQuery領域

Question

我有5場

<form> 
    First name: <input type="text" name="firstname" required><br> 
    Last name: <input type="text" name="lastname" required> 
    Age: <input type="text" name="age" required> 
    Gender: <input type="text" name="gender" required> 
    City: <input type="text" name="city" required> 
    Locality: <input type="text" name="locality"> 
    Address: <input type="text" name="address"> 
    </form> 

表單時，基於字段填寫的號碼都輸入表單字段數的百分比我怎麼能顯示數字像我們在一些社交網站中看到的那樣輸入爲percentage completed的字段。在這裏，只有名字，姓氏，年齡，性別，城市是強制性的，即必需的，地點和地址不是強制性的，因此它必須將5個字段計入，如果輸入2個字段，則必須顯示40％領域做出100％，2場讓40％

Answer 1

您可以簡單地添加一個<p>或任何你的HTML：

<form> 
    First name: <input type="text" name="firstname" required="required"><br> 
    Last name: <input type="text" name="lastname" required="required"> 
    Age: <input type="text" name="age" required="required"> 
    Gender: <input type="text" name="gender" required="required"> 
    City: <input type="text" name="city" required="required"> 
    Locality: <input type="text" name="locality"> 
    Address: <input type="text" name="address"> 
</form> 
<p id='percentage'>0% completed</p> 

而在你的js文件，輸入字段的每個變化，你算所需的字段並填充所需字段來獲得實際百分比。如果您添加必填字段，則不必在js文件中更改任何內容。

$(document).ready(function(){ 
    $('input').on('change', function(){ 
     var cntreq = 0; 
     var cntvals = 0; 
     $('input').each(function(i, val) { 
      if($(this).attr('required') == 'required') { 
       cntreq++; 
       if($(this).val() != '') { 
        cntvals++; 
       } 
      } 
     }); 
     var count = (cntvals/cntreq)*100; 
     $('#percentage').empty(); 
     $('#percentage').append(count+'% completed'); 
    }); 
}); 

你也可以結合一些驗證。

請參閱fiddle這裏。

Answer 2

我對這個問題採取將使用<meter>元素來顯示進度，並通過簡單地制定完成<input />元素的數量爲[required]的百分比確立進展元素：

// bind a 'keyup' event-handler to the [required] input elements: 
 
$('input[required]').on('keyup', function() { 
 
    // get the number of [required] input elements, and add the 'required' class: 
 
    var required = $('input[required]').addClass('required'), 
 
    // filter the [required] input elements, keeping only those 
 
    // with entered text: 
 
    completed = required.filter(function() { 
 
     return this.value.trim().length > 0; 
 
    // remove the 'required' class for completed fields: 
 
    }).removeClass('required'); 
 
    
 
    // if there are any completed inputs (to prevent any attempts to divide zero): 
 
    if (completed.length) { 
 
    // set the value of the <meter> to the percentage of completed inputs: 
 
    $('#progress').val((completed.length/required.length) * 100); 
 
    } 
 
}).addClass('required');

form { 
 
    width: 50%; 
 
    margin: 0 auto; 
 
} 
 
label { 
 
    display: block; 
 
    overflow: hidden; 
 
    margin: 0 0 0.3em 0; 
 
} 
 
label input { 
 
    width: 10em; 
 
    float: right; 
 
} 
 
input[required] { 
 
    border-bottom-color: #0c0; 
 
} 
 
input[required].required { 
 
    border-bottom-color: #f00; 
 
} 
 
meter { 
 
    margin: 0.5em 0; 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <label>First name: 
 
    <input type="text" name="firstname" required> 
 
    </label> 
 
    <label>Last name: 
 
    <input type="text" name="lastname" required> 
 
    </label> 
 
    <label> 
 
    Age: 
 
    <input type="text" name="age" required> 
 
    </label> 
 
    <label>Gender: 
 
    <input type="text" name="gender" required> 
 
    </label> 
 
    <label>City: 
 
    <input type="text" name="city" required> 
 
    </label> 
 
    <label>Locality: 
 
    <input type="text" name="locality"> 
 
    </label> 
 
    <label>Address: 
 
    <input type="text" name="address"> 
 
    </label> 
 
    <meter id="progress" min="0" max="100" value="0" /> 
 
</form>

參考文獻：

• HTML：
  • <meter>。
• 的jQuery：
  • addClass()。
  • filter()。
  • on()。
  • removeClass()。
  • val()。

Answer 3

這是一個基本的jQuery無解：

(function(d, w, undefined) { 
 
    
 
    d.querySelector('form').addEventListener('keyup', checkDone); 
 
    
 
    function checkDone(e) { 
 
    var originator = e.target || e.srcElement 
 
     ,nvalue = 0 
 
     ,required = d.querySelectorAll('input[required]') 
 
     ,indicator = d.querySelector('#percentage') 
 
     ,xwidth = 0; 
 
    [].slice.call(d.querySelectorAll('input[required]')).forEach(
 
     function (el) { nvalue += el.value.length && 1 || 0; } 
 
    ); 
 
    xwidth = ((nvalue/required.length) * 100); 
 
    if (nvalue > 0 && xwidth<=100) { 
 
     indicator.style.visibility = 'visible'; 
 
     indicator.style.width = xwidth + '%'; 
 
     indicator.setAttribute('data-percDone', xwidth + '% done'); 
 
    } 
 
    } 
 
    
 
}(document, window))

#percentage { 
 
    background-color: green; 
 
    color: white; 
 
    height: 1.5em; 
 
    line-height: 1.5em; 
 
    padding-left: 1em; 
 
    visibility: hidden; 
 
} 
 

 
.indicator { 
 
    width: 300px; 
 
} 
 

 
#percentage:before { 
 
    content: attr(data-percDone); 
 
}

<form> 
 
    First name: <input type="text" name="firstname" required><br> 
 
    Last name: <input type="text" name="lastname" required><br> 
 
    Age: <input type="text" name="age" required><br> 
 
    Gender: <input type="text" name="gender" required><br> 
 
    City: <input type="text" name="city" required><br> 
 
    Locality: <input type="text" name="locality"><br> 
 
    Address: <input type="text" name="address"> 
 
    </form> 
 
    <div class="indicator"> 
 
    <div id="percentage" data-percDone="0%"><div> 
 
    </div>