计算和自动更新基础上填写的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>