JavaScript: disable <button> until value is selected

Question

I'm trying to implement a javascript code for the html5 form that will responsible for disabling/enabling the button until the select element is not selected. Here is the codes:

HTML:

<form name="courseForm" id="courseForm">
    <select name="coursetype" id="coursetype" onchange="enableStartBtn()">
        <option value="0" selected="selected">Select here...</option>
        <option value="1">CourseName 1</option>
        <option value="2">CourseName 2</option>
        <option value="3">CourseName 3</option>
    </select>
<button type="button" id="startBtn" disabled="disabled" onclick="Test()">Start</button>
</form>

and JavaScript:

function enableStartBtn() {
    $('#startBtn').removeAttr('disabled');
}

function Test() {
    var form = $('#courseForm');
    var course = $('#coursetype', form).val();
    if (course == '0') {
        alert('Select the course first!');
    } else if (course == '1') {
        alert('CourseName 1 is selected!');
    } else if (course == '2') {
        alert('CourseName 2 is selected!');
    } else if (course == '3') {
        alert('This course is not implemented yet');
    }
}

I'm using JQuery 1.9.1 in my code, everything looks like ok, but the when value is selected the button is not enables. Any help would be appreciated.

UPDATE: Sorry guys forgot to mention that I'm also using JQuery Mobile 1.3.0, so without including jquery mobile it works, but with jquery mobile not. Here is the jsfiddle version: http://jsfiddle.net/dozent/UVQ4m/

It works fine for me - jsfiddle.net/JMkRa , although I do agree you should use prop for this — Ian
– Ian, Commented May 15, 2013 at 17:36
You can also add "disabled" to your <option> markup so the user can't re-select this: <option value="0" selected="selected" disabled> — tymeJV
– tymeJV, Commented May 15, 2013 at 17:37
If you're trying to toggle it being disabled (based on the selected item), you could use this: jsfiddle.net/JMkRa/2 . It uses a special data-* attribute to target not implemented courses, instead of storing that in the JS — Ian
– Ian, Commented May 15, 2013 at 17:50

adeneo · Accepted Answer · 2013-05-15 17:43:18Z

6

<form name="courseForm" id="courseForm">
    <select name="coursetype" id="coursetype">
        <option value="0" disabled>Select here...</option>
        <option value="1">CourseName 1</option>
        <option value="2">CourseName 2</option>
        <option value="3">CourseName 3</option>
    </select>
    <button type="button" id="startBtn" disabled>Start</button>
</form>

And do :

var courses = ['1','2']; // available courses

$('#coursetype').one('change', function() {
     $('#startBtn').prop('disabled', false);
});

$('#startBtn').on('click', function() {
    var val = $('#coursetype').val(),
        msg = $.inArray(val, courses) != -1 ? 'CourseName '+val+' is selected!' : 'This course is not implemented yet';
    alert(msg);
});

FIDDLE

answered May 15, 2013 at 17:43

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

9 Comments

Ian Over a year ago

Nice. Although maybe it makes sense to just put a special data-* attribute on the "not implemented" courses. Also, why are you using .one()?

Derek Henderson Over a year ago

Why .one()? Wouldn't it be better to enable/disable the button according to course availability?

adeneo Over a year ago

Once the select is changed, the button is enabled, and you can't select the first option again, so there's no need to execute the event handler more than once.

Derek Henderson Over a year ago

But I wouldn't want the button enabled if the course were not available. I would disable it if the user selects course 3. I suppose that's a UI issue, though.

adeneo Over a year ago

@DerekHenderson - I would probably do something like that as well, but then you don't need a button, you'd do everything in the change event, as there's no need for a button to tell you if the course is available if the button is disabled when the course is unavailable ? Anyway, the question was to enable the button on the first change of the select, and having the event handler for more than one time is unesseccary !

|

bipen · Accepted Answer · 2013-05-15 17:35:53Z

1

use prop()

function enableStartBtn() {
   $('#startBtn').prop('disabled',false); //<----to remove  disable attr of the button
}

you need to change the property of the button here not just remove the attribute

edited May 15, 2013 at 17:35

answered May 15, 2013 at 17:30

bipen

36.6k9 gold badges51 silver badges62 bronze badges

Comments

user11623904 · Accepted Answer · 2019-06-10 05:25:10Z

0

include in header area

not this =$('#coursetype').one('change', function() {
it should= $('#coursetype').on('change', function() {

answered Jun 10, 2019 at 5:25

user11623904

11 bronze badge

Collectives™ on Stack Overflow

JavaScript: disable <button> until value is selected

3 Answers 3

9 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related