Questions › add class in for loop button click
suli-g Asked

(function ($) {
$.fn.fCycle = function () {
        var x;
        for (x in arguments) {
            $(arguments[x]).close();
        }
        $(this).collapse("show");
    };

$(".btn-next").on('click', function() {
        var form = [$("#name"), $("#surname"), $("#student_number"), $("#cellphone"), $("#email"), $("#course"), $("#year")],
            i = 0,
            a = "#" + $(this).attr("data-to"),
            b = "#" + $(this).attr("data-from");
        if ($(this).hasClass("to_course")) {
            for (i; 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,
        a = "#" + $(this).attr("data-to"),
        b = "#" + $(this).attr("data-from");
    if ($(this).hasClass("to_course")) {
        for (i; 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 your 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 to work at all - in the case of the Original (http://alpha.msauwc.co.za -> if you click on the Join the MSA button, You'll find that the form does work. The issue is that the next button should not be working when the input fields have not been filled.

This has to be prevented using jquery.

Comments :
brk replied

Please post HTML snippet

Teemu replied

Depends on the types of the form elements, but for example the value of input type="text" is never undefined. If there's no text entered, the value is an empty string. This means that the first if in the loop will never pass.


2 Answers :
Michael Stilson answered

Try defining your array with just selector strings, and then wrapping your form[i] objects like:

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

suli-g replied
It doesn't seem to have fixed anything...;
Michael Stilson replied
first off, there is a js error because the jquery lib is loaded after the bootstrap so, those script include definitions will have to be switched. second, you will need to add //cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/css/tether.min‌​.css to the head, and //cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.‌​js to the script includes, in between the jquery and bootstrap includes.;
suli-g replied
I don't know why, but after messing around with it - it started working again, This seems to have been the correct direction to go, though.;
Michael Stilson replied
excellent! good to hear you worked it out. :);
nocturns2 answered

You can use these methods to disable & activate the button:

$(".btn-next").addClass('disabled') // when you want to disable it
$(".btn-next").removeClass('disabled') // when you want to activate it