title: change type of input field with jQuery
body: <pre class="lang-js prettyprint-override"><code>$(document).ready(function() {
      // #login-box password field
      $('#password').attr('type', 'text');
      $('#password').val('Password');
  });
  </code></pre>
  
  <p>This is supposed to change the <code>#password</code> input field (with <code>id="password"</code>) that is of <code>type</code> <code>password</code> to a normal text field, and then fill in the text “Password”.</p>
  
  <p>It doesn’t work, though. Why?</p>
  
  <p>Here is the form:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;form enctype="application/x-www-form-urlencoded" method="post" action="/auth/sign-in"&gt;
    &lt;ol&gt;
      &lt;li&gt;
        &lt;div class="element"&gt;
          &lt;input type="text" name="username" id="username" value="Prihlasovacie meno" class="input-text" /&gt;
        &lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;div class="element"&gt;
          &lt;input type="password" name="password" id="password" value="" class="input-text" /&gt;
        &lt;/div&gt;
      &lt;/li&gt;
      &lt;li class="button"&gt;
        &lt;div class="button"&gt;
          &lt;input type="submit" name="sign_in" id="sign_in" value="Prihlásiť" class="input-submit" /&gt;
        &lt;/div&gt;
      &lt;/li&gt;
    &lt;/ol&gt;
  &lt;/form&gt;
  </code></pre>