CODEWITHSUNDEEP
javascriptjqueryvalidationjquery-dropkick
user333128
user333128

Reputation: 103

Enable / Disable submit button on a dropkick enabled form?

I have a form styled with jQuery's Dropkick however I'm unable enable / disable a submit button once the forms get the style. The JS validation works as expected without Dropkick.

The HTML:

<form method="get" id="dropkickform" action="">
    <select id="min" class="list">
        <option selected="selected" value="">Selection 1</option>
        <option value="1">100</option>
        <option value="2">200</option>
    </select>

    <select id="max" class="list">
        <option selected="selected" value="">Selection 2</option>
        <option value="1">500</option>
        <option value="2">600</option>
    </select>

    <input type="submit" value="Submit"/>
</form>

The JS:

$('.list').dropkick();

$(document).ready(function () {
    $form = $('#dropkickform');
    $form.find(':input[type="submit"]').prop('disabled', true);
    $form.find(':input').change(function () {
        var disable = false;
        $form.find(':input').not('[type="submit"]').each(function (i, el) {
            if ($.trim(el.value) === '') {
                disable = true;
            }
        });
        $form.find(':input[type="submit"]').prop('disabled', disable);
    });
});

http://jsfiddle.net/L3FCV/

Upvotes: 0

Views: 951

Answers (1)

boz
boz

Reputation: 4907

From what I can see once you apply dropkick it will not update the selects behind the scenes so your validation will not work because of that (the selects have the initial option selected all the time, have a look in firebug/chrome web inspector to see it).

I've been able to get close with http://jsfiddle.net/Qguh5/ but it does break sometimes.

I used:

$('.list').dropkick({
    change: function(value, label){
        var disable = true;

        $('.dk_option_current > a').each(function(){
            if($(this).data('dk-dropdown-value')){
                disable = false;
            } else {
                disable = true;
            }
        });

        $form.find(':input[type="submit"]').prop('disabled',disable);
    }
});

The change event is mentioned on the dropkick page.

I suggest you give http://uniformjs.com a try if you want custom looking forms. It might not be as pretty as dropkick but it is a lot easier to use in your scenario.

Upvotes: 1

Related Questions