javascript - add class in for loop button click -


(function ($) {  $.fn.fcycle = function () {          var x;          (x in arguments) {              $(arguments[x]).close();          }          $(this).collapse("show");      };    $(".btn-next").on('click', function() {          var form = [$("#name"), $("#surname"), $("#student_number"), $("#cellphone"), $("#email"), $("#course"), $("#year")],              = 0,              = "#" + $(this).attr("data-to"),              b = "#" + $(this).attr("data-from");          if ($(this).hasclass("to_course")) {              (i; < 5; i++) {                  console.log(form[i].val());                  if (form[i].val() === undefined) {                      form[i].addclass("has-danger")                      $(a).fcycle(b);                  } else if (form[i].hasclass("has-danger") && form[i].length > 0) {                      form[i].removeclass("has-danger")                  }              }              $(a).fcycle(b);          }      });    }(jquery));  $(".btn-next").on('click', function () {  	var form = [$("#name")],      	i = 0,          = "#" + $(this).attr("data-to"),          b = "#" + $(this).attr("data-from");      if ($(this).hasclass("to_course")) {          (i; < form.length; i++) {              if (form[i].val() === undefined) {                  form[i].addclass("has-danger")                  $(a).fcycle(b);              }   			else if (form[i].hasclass("has-danger") && form[i].length > 0) {                  form[i].removeclass("has-danger");              }          }          $(a).fcycle(b);      }  });  			
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"/>  <form method="post" id="apply">          <div id="personal" class="collapse in">              <fieldset class="col-xs-10 col-xs-offset-1 form-group">                  <div class="row">                      <label for="names">name(s)</label>                       <input class="form-control" type="text" name="names" id="names" placeholder="enter full name here">                  </div>                  <hr>                  <div class="row">                      <nav>                          <ul class="pager">                              <li>                                  <button class="btn btn-danger btn-cancel" type="button">cancel</button>                              </li>                              <li class="pager-next">                                  <button class="btn btn-next btn-success to_course" type="button" data-to="course" data-from="personal">next</button>                              </li>                          </ul>                      </nav>                  </div>              </fieldset>          </div>          <div id="course" class="collapse">              <p>course</p>          </div>      </form>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

the above snippet doesn't seem work @ - in case of original (http://alpha.msauwc.co.za -> if click on join msa button, you'll find form work. issue next button should not working when input fields have not been filled.

this has prevented using jquery.

try defining array selector strings, , wrapping form[i] objects like:

$(form[i]).val(), $(form[i]).addclass('has-danger'), etc


Comments

Popular posts from this blog

authentication - Mongodb revoke acccess to connect test database -

r - Update two sets of radiobuttons reactively - shiny -

ios - Realm over CoreData should I use NSFetchedResultController or a Dictionary? -