title: Disable submit button on page load, enable it after function is called
body: <p>I have a username/password form where the password appears after the user enters their username. Here is the HTML:</p>
  
  <pre><code>&lt;form action="login.php" method="post"&gt;
      &lt;!-- Username form --&gt;
      &lt;div id="form1"&gt;
          &lt;input type="text" id="username" name="username" placeholder="username"&gt;
          &lt;input type="button" value="" id="test1" onClick="switchForm()"&gt;
      &lt;/div&gt;
      &lt;!-- Password form --&gt;
      &lt;div id="form2"&gt;
          &lt;input type="password" id="password" name="password" placeholder="password"&gt;
          &lt;input id="button" type="submit" value=""&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p>and here is the Javascript for the function switchForm():</p>
  
  <pre><code>function switchForm() {
     document.getElementById("form1").style.display = "none";
     document.getElementById("form2").style.display = "block";
     document.getElementById("password").focus();
  }
  </code></pre>
  
  <p>I have another piece of code that has the enter button simulate a click of <strong>test1</strong> so the form switches when a user presses enter. The issue is the form submits all the way (including the blank password field). What I want is to disable the submit button during page load, and re-enable it during the execution of switchForm(). Thanks in advance! I think it has something to do with .prop() or .attr() or something, but I'm not sure the best way to do this.</p>