CODEWITHSUNDEEP
jqueryattrconditional-statementssubmit-buttonjavascript
Works for a Living
Works for a Living

Reputation: 1293

Disable submit button if all three of three specific dropdown fields are empty

There are four dropdowns in the form. One is optional. Of the other three, at least one has to be chosen. I have a script that I'm using on a form with one field, that disables submit until a selection is made. But I can't figure out and can't find how to adapt it to be disabled until at least one of three specific dropdowns has a selection made. Here's the current script:

jQuery(function($) {
    $('#ssbbcmodal-attribute').change(function() {
        var empty = false;
        $('#ssbbcmodal-attribute').each(function() {
            if ($(this).val() == null) {
                empty = true;
            }
        });
        if (empty) {
            $('#ssbbcmodal-submit').attr('disabled', 'disabled');
        } else {
            $('#ssbbcmodal-submit').removeAttr('disabled');
        }
    });
})()

UPDATE 1

I might have thought of a way to do it. Will be back soon with update.

UPDATE 2

OK, my way to do it didn't work, probably because I'm guessing at this. Here's what I tried:

jQuery(function($) {
var empty = false;

    $('#sseomodal-level').change(function() {
        var levelempty = false;
        $('#sseomodal-level').each(function() {
            if ($(this).val() == null) {
                levelempty = true;
            }
        });
    });
    $('#sseomodal-username').change(function() {
        var userempty = false;
        $('#sseomodal-username').each(function() {
            if ($(this).val() == null) {
                userempty = true;
            }
        });
    });
    $('#sseomodal-logged').change(function() {
        var loggedempty = false;
        $('#sseomodal-logged').each(function() {
            if ($(this).val() == null) {
                loggedempty = true;
            }
        });
    });     

if (levelempty === true && userempty === true && loggedempty === true)
    {empty = false}
 if (empty) {
            $('#sseomodal-submit').attr('disabled', 'disabled');
        } else {
            $('#sseomodal-submit').removeAttr('disabled');
        }
})()

The disabled attribute is never removed with this, i.e., it doesn't work.

Upvotes: 0

Views: 2621

Answers (1)

cssyphus
cssyphus

Reputation: 40038

jsFiddle Demo here

The three selects you must test can each have a class (something like require_one).

When any select box is changed, check if it has that class. If so, then remove the disabled attribute from the Select button.

Example code:

$('#mySubmit').attr('disabled','disabled');

$('select').change(function(){
    if ( $(this).hasClass('require_one') ){
        $('#mySubmit').removeAttr('disabled');
    }
});

For your own code, try reducing it to just this and see if it works:

$(document).ready(function() {
    $('#sseomodal-submit').attr('disabled', 'disabled');

    $('[id^=sseomodal]').change(function() {
        var myId = $(this).attr('id');
        if (myId == 'sseomodal-level' || myId == 'sseomodal-username' || myId == 'sseomodal-logged') {
            $('#sseomodal-submit').removeAttr('disabled');
        }
    });

}); // END document.ready

Upvotes: 1

Related Questions