形式和進度條

Question

具有進度條的形式如下。除了單選按鈕，一切都在工作。我需要在每個表單域值填充後更改填寫表單的百分比。

<form accept-charset="UTF-8" action="#" class="pro-form" id="pro-form" method="post"> 

     <h1>Progress Form</h1>  
    <progress max="100" value="0" id="progress" class="bar"> </progress> 
    <div class="progress-message" id="progress-message" >progress </div> 


      <input type="radio" name="value1" required="required" value="yes"> 
      <input type="radio" name="value1" required="required" value="no"> 
      <input id="card_name" required="required" type="text"> 
      <input id="card_address_1" required="required" type="text"> 
      <input id="card_zip" maxlength="10" required="required" type="text"> 


      <input name="commit" type="submit" value="ok" class="button"> 


     </form> 

如何處理單選按鈕？爲什麼JQuery鍵入函數在點擊它們時不會改變 進度消息？

<script> 
    $("#pro-form input[required]").keyup(function() { 

    var numValid = 0; 
    $("#pro-form input[required]").each(function() { 
     if (this.validity.valid) { 
      numValid++; 
     } 
    }); 

    var progress = $("#progress"), 
     progressMessage = $("#progress-message"); 

    if (numValid == 0) { 
     progress.attr("value", "0"); 
     progressMessage.text(" 0%"); 
    } 
    if (numValid == 1) { 
     progress.attr("value", "20"); 
     progressMessage.text(" 20%"); 
    } 
    if (numValid == 2) { 
     progress.attr("value", "40"); 
     progressMessage.text(" 40%"); 
    } 
    if (numValid == 3) { 
     progress.attr("value", "60"); 
     progressMessage.text(" 60%"); 
    } 
    if (numValid == 4) { 
     progress.attr("value", "80"); 
     progressMessage.text(" 80%"); 
    } 
    if (numValid == 5) { 
     progress.attr("value", "95"); 
     progressMessage.text(" 90%"); 
    } 

    }); 
    </script> 

Answer 1

我創建了一個函數來包含您的更新進度條碼，然後我爲單選按鈕正確地分配了更改函數。評論你是否在尋找別的東西。

$("[name=value1]").change(buildProgress); 
 
$("#pro-form input[required]").keyup(buildProgress); 
 

 

 

 
function buildProgress() { 
 
    var numValid = 0; 
 
    $("#pro-form input[required]").each(function() { 
 
     if (this.validity.valid) { 
 
      numValid++; 
 
     } 
 
    }); 
 
    if ($("[name=value1]:checked").length) { 
 
     numValid++; 
 
    } 
 

 
    var progress = $("#progress"), 
 
     progressMessage = $("#progress-message"); 
 

 
    if (numValid == 0) { 
 
     progress.attr("value", "0"); 
 
     progressMessage.text(" 0%"); 
 
    } 
 
    if (numValid == 1) { 
 
     progress.attr("value", "20"); 
 
     progressMessage.text(" 20%"); 
 
    } 
 
    if (numValid == 2) { 
 
     progress.attr("value", "40"); 
 
     progressMessage.text(" 40%"); 
 
    } 
 
    if (numValid == 3) { 
 
     progress.attr("value", "60"); 
 
     progressMessage.text(" 60%"); 
 
    } 
 
    if (numValid == 4) { 
 
     progress.attr("value", "80"); 
 
     progressMessage.text(" 80%"); 
 
    } 
 
    if (numValid == 5) { 
 
     progress.attr("value", "95"); 
 
     progressMessage.text(" 90%"); 
 
    } 
 
}

input[type=text] { 
 
    border:1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form accept-charset="UTF-8" action="#" class="pro-form" id="pro-form" method="post"> 
 

 
     <h1>Progress Form</h1>  
 
    <progress max="100" value="0" id="progress" class="bar"> </progress> 
 
    <div class="progress-message" id="progress-message" >progress </div> 
 

 

 
      <input type="radio" name="value1" required="required" value="yes"> 
 
      <input type="radio" name="value1" required="required" value="no"> 
 
      <input id="card_name" required="required" type="text"> 
 
      <input id="card_address_1" required="required" type="text"> 
 
      <input id="card_zip" maxlength="10" required="required" type="text"> 
 

 

 
      <input name="commit" type="submit" value="ok" class="button"> 
 

 

 
     </form>