title: How to make Submit button stay disable when page loads
body: <p>Ok so I've managed to do most of what I want to do with this form, but missing one thing from the puzzle.
  I have a dropdown form which requires you to select a number of different options. However, I have one option, which is what is shown when the page loads "-- select an option --", that disables the submit button when it is selected, but it does not disable it when the page loads, which is the option that is automatically selected, if that makes sense.
  How do I automatically make the submit button disabled when the page loads?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function selectChanged() {
    attacks = document.getElementById("attacks");
    if (attacks.value == "not_valid") {
      document.getElementById("sbattle").disabled = true;
    } else {
      document.getElementById("sbattle").disabled = false;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form&gt;
    &lt;select name="attacks" id="attacks" value="Select" onchange="selectChanged()"&gt;
      &lt;option value="not_valid"&gt;-- select an option --&lt;/option&gt;
      &lt;option value="example1"&gt;example 1&lt;/option&gt;
      &lt;option value="example2"&gt;example 2&lt;/option&gt;
      &lt;option value="example3"&gt;example 3&lt;/option&gt;
      &lt;option value="example4"&gt;example 4&lt;/option&gt;
      &lt;option value="example5"&gt;example 5&lt;/option&gt;
    &lt;/select&gt;
    &lt;br&gt;
    &lt;input type="button" id="sbattle" onclick="sBattle()" value="Battle"&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>