Setting a default variable for an object

Question

I have the following function which works from draggable/defined ranges. I am experiencing an issue in which I cannot figure out. The form submits fine if the user uses the draggable bar and chooses a range. However, if they do not define a range and essentially use the default I have then the form does not submit. I know this is because the click function is not running.

What I am thinking will work is if the ranges have a default defined outside of the click function, however I am unsure how to execute. Does anyone know how I can do this?

I am calling the ranges on submit like this:

var range_upper = ranges[i].upper; var range_lower = ranges[i].lower;

Full code.

var iSelected2 = 0;
var i = 0;
$(function() {
    $("#sliderInterval").draggable();

    //For human test
    $.validator.addMethod("customRule", function(value, element, params) {
        return this.optional(element) || value.toLowerCase() === params[0].toLowerCase();
    }, "Please enter the correct value");

    var ranges = [{
        lower: 500,
        upper: 1000
    }, {
        lower: 1100,
        upper: 2000
    }, {
        lower: 2100,
        upper: 5000
    }, {
        lower: 5100,
        upper: 10000
    }, {
        lower: 11000,
        upper: 20000
    }, {
        lower: 21000,
        upper: 50000
    }, ];
    var wslider = $('#sliderBar').width() / (ranges.length);
    for (var i = 0; i < ranges.length; i++) {
        var range = $('<div class="rangedot"><div class="intervalCircle"></div></div>');
        var left = (100 / (ranges.length) * i);
        rangeleft = "calc(" + left + "% - 2px)";
        range.css({
            left: rangeleft,
            width: wslider
        });
        range.on('click', function(idx) {
            return function() {
                //iSelected = idx;
                iSelected = $(idx.target).index();
                var sliderleft = wslider * idx;
                $('#sliderInterval').animate({
                    left: sliderleft
                });
                $('#budgetAmount').text('$' + ranges[idx].lower.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') + ' - ' + '$' + ranges[idx].upper.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','));
            };
        }(i));
        $('#sliderBar').append(range);
        $('#sliderInterval').css('width', wslider + 'px');
    }
    $('#budgetAmount').show().text('$500 - $1,000 Budget');


    var handle = $('#custom-handle');
    var amount = $('#budgetAmount');
    $('#slider').slider ({
        min: 0,
        max: 5,
        step: 1,
        create: function() {
            var i = $(this).slider("value");
            amount.text("$" + ranges[i].lower + " - $" + ranges[i].upper);
            $.each(ranges, function(key, item) {
                var range = $("<div>", {
                    class: "rangedot"
                }).data("key", key);
                var dot = $("<div>", {
                    class: "intervalCircle"
                }).appendTo(range);
                var l = Math.round(100 / (ranges.length - 1) * key);
                var w = $("#slider").width() / (ranges.length);
                range.css({
                    left: "calc(" + l + "% - " + (w / 2) + "px)",
                    width: w + "px"
                }).change(function() {
                    $("#slider").slider("value", $(this).data("key"));
                }).appendTo("#slider");
            });
        },
        slide: function(event, ui) {
            i = ui.value;
            iSelected2 = $(i.target).index();
            amount.text("$" + ranges[i].lower.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")  + " - $" + ranges[i].upper.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + " Budget");
        }
    });

How I am submitting the varaibles - using Ajax's Submithandler

submitHandler: function(form) {
    event.preventDefault();
    var range_upper = ranges[i].upper;
    var range_lower = ranges[i].lower;
}

Answer 1

You can use the || operator to assign value equal to value if it's truthy or a default value if it's falsy.

$.validator.addMethod("customRule", function(value, element, params) {
    value = value || defaultValue 
    return this.optional(element) || value.toLowerCase() === params[0].toLowerCase();
}, "Please enter the correct value");

Answer 2

If you just want the ranges to default, assuming ranges[i].upper and lower return a falsey value you could use OR(||) to "default" to a number of your choice.

var range_upper = ranges[i].upper || 1;
var range_lower = ranges[i].lower || 10;