add class in for loop button click

Question

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

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. — Teemu
– Teemu, Commented Jan 27, 2016 at 17:54

Michael Stilson · Accepted Answer · 2016-01-27 17:50:21Z

1

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

answered Jan 27, 2016 at 17:50

Michael Stilson

3402 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Michael Stilson Over a year ago

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 Over a year ago

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.

nocturns2 · Accepted Answer · 2016-01-27 22:18:00Z

0

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

answered Jan 27, 2016 at 22:18

nocturns2

66110 silver badges17 bronze badges

Collectives™ on Stack Overflow

add class in for loop button click

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related