Question

I am trying to write a function that will:

• Disable the submit button when no option in a dropbox is selected (ie empty string is selected). Enable all dropboxes.
• On user selection of an option in a dropbox (that is not the empty
  string), disable all other drop boxes and enable the submit button.

However, as a beginner at JavaScript I have no idea how I would begin this. How would I write such code?

So my simplified HTML would be as follows :

<form id="form" name="form" method="post" action="confirmation.cshtml">
   <select name="start_to_end_time" class="start_to_end_time">
      <option value="1">1</option>
      <option value="2">2</option>
   </select>

   <select name="start_to_end_time" class="start_to_end_time">
      <option value="3">3</option>
      <option value="4">4</option>
   </select>

   <button type="submit">Submit</button>

How can I write code that fulfills this function?

Answer 1

I think it’s not a good idea to give two HTML element the same name attribute unless you use brackets [] within it. The last one may overwrite the value of the first one.

JavaScript using MooTools:

$$('.start_to_end_time').each(function(element) {
    element.addEvent('click', function(ev) {
        $$('.start_to_end_time').each(function(selectbox) {

                if (element.getProperty('value') != '') {
                    $('button').setProperty('disabled', '');
                    $$('.start_to_end_time').each(function(b) {
                        if (b != element) {
                            b.setProperty('disabled', 'disabled');
                        } else {
                            b.setProperty('disabled', '');
                        }
                    }
                } else {
                    $('button').setProperty('disabled', 'disabled');
                    $$('.start_to_end_time').each(function(b) {
                        b.setProperty('disabled', '');
                    }
                }
        });
    });
});

I didn’t test the code. You may define some methods to make it more readable.