進行状況バー付きフォーム

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のキーアップ機能が変更されないのですか？ progress-message？

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