Add CSS on click of a disabled button

Question

Following various other posts I've disabled a submit button until options have been selected from the form.

What I'd like to do is highlight the select boxes when the disabled button is clicked. I'm thinking the easiest way to do this is to apply a css border-color to the select boxes with a click function. But I'm not sure how to achieve this.

My script so far:

$('#submitorder').prop('disabled', true);

function updateFormEnabled() {
    if (verifyAdSettings()) {
        $('#submitorder').prop('disabled', false);
    } else {
        $('#submitorder').prop('disabled', true);
    }
}

function verifyAdSettings() {
    if ($('#course1choice').val() != '' && $('#course2choice').val() != '') {
        return true;
    } else {
        return false
    }
}

$('#course1choice').change(updateFormEnabled);

$('#course2choice').change(updateFormEnabled);

My html:

<form id="productchoices">
<select name="92" id="course1choice">
<option value="">Select Course 1</option>
<option value="659">Lesson Planning </option>
<option value="660">Teaching One to One </option>
<option value="661">Teaching Teenagers </option>
<option value="662">Teaching Young Learners </option>
</select>

<select name="91" id="course2choice">
<option value="">Select Course 2</option>
<option value="655">Lesson Planning </option>
<option value="656">Teaching One to One </option>
<option value="657">Teaching Teenagers </option>
<option value="658">Teaching Young Learners </option>
</select>

            <button type="submit" id="submitorder">Book Now</button>
</form>

Mouse events are not triggered on disabled input elements. You may want to [try a workaround like this](http://stackoverflow.com/questions/3100319/event-on-a-disabled-input). — lshettyl, Mar 16 '15 at 16:32
Instead of disabling the submit button, can you add a handler to it that highlights the select boxes and suppresses submission by returning false? — radiaph, Mar 16 '15 at 16:47

score 0 · Answer 1 · answered Mar 16 '15 at 17:33

Please look the below example for you I have modified some fields.

<form id="productchoices">
        <select name="92" id="course1choice" class="choice">
            <option value="">Select Course 1</option>
            <option value="659">Lesson Planning </option>
            <option value="660">Teaching One to One </option>
            <option value="661">Teaching Teenagers </option>
            <option value="662">Teaching Young Learners </option>
        </select>
        <select name="91" id="course2choice" class="choice">
            <option value="">Select Course 2</option>
            <option value="655">Lesson Planning </option>
            <option value="656">Teaching One to One </option>
            <option value="657">Teaching Teenagers </option>
            <option value="658">Teaching Young Learners </option>
        </select>
        <button type="submit" id="submitorder">Book Now</button>
    </form>
$(document).ready(function () {
$("#submitorder").prop("disabled", true);
$('.choice').on('change', function () {
    if ($(this).val() == '') {
        $("#submitorder").prop("disabled", true);
    } else {
        $("#submitorder").prop("disabled", false);
    }
});

});

Let me know if any query. Example code

score 0 · Answer 2 · answered Mar 16 '15 at 17:52

Instead of disabling the submit button, you can add a handler to it that highlights the select boxes and suppresses submission by returning false.

CSS:

.highlighted {
    border-color: red; /* or whatever */
}

Javascript:

$('#submitorder').submit(function() {
    var course1choice = $('#course1choice');
    if (course1choice.val() == '') {
        course1choice.addClass("highlighted");
        return false; // prevents submission
    }

    var course2choice = $('#course2choice');
    if (course2choice.val() == '') {
        course2choice.addClass("highlighted");
        return false; // prevents submission
    }

    return true; // allows submission
});

$("select").change(function() {
    $(this).removeClass("highlighted");
});

This seems like it could be the best solution but I cant get it to work? (js isn't my forte. lol) [link](https://jsfiddle.net/davidhudson/9pLndpgj/1/) — Dave Hudson, Mar 17 '15 at 09:29

Add CSS on click of a disabled button

2 Answers2