form with progress bar

Question

Have the form below with progress bar. Everything is working except of radio buttons. I need to change percent of fiiling form after each form field value filling.

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

How to deal with radio buttons? Why JQuery keyup function don't change progress-message when clicking on them?

 <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

I created a function to contain your update progress bar code, then I assigned the change function properly for the radio buttons. Comment if you're looking for something else.

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