Change the input field type with jQuery

Question

Change the input field type with jQuery

Navigation

#1 by (1 votes)

-2

$(document).ready(function() {
    $('#password').attr('type', 'text');
    $('#password').val('Password');
});

This should change the #password input field (with id="password" ) of type password normal text field and then fill in the text " Password ".

It does not work. Why?

Here is the form:

<form enctype="application/x-www-form-urlencoded" method="post" action="/auth/sign-in">
  <ol>
    <li>
      <div class="element">
        <input type="text" name="username" id="username" value="Prihlasovacie meno" class="input-text" />
      </div>
    </li>
    <li>
      <div class="element">
        <input type="password" name="password" id="password" value="" class="input-text" />
      </div>
    </li>
    <li class="button">
      <div class="button">
        <input type="submit" name="sign_in" id="sign_in" value="Prihlásiť" class="input-submit" />
      </div>
    </li>
  </ol>
</form>

javascript jquery

asked by anonymous 25.09.2018 / 16:07

1 answer

Error: "Unknown: failed to open stream: No such file or directory in Unknown on line 0" View result of forEach outside it [closed]

score 1 · Accepted Answer

Your code did not work with attr because you are using the current version of jQuery 3.3.1 that uses prop to work with attributes attr was used up to 1.6 versions:

$(document).ready(function() {
    $('#password').prop('type', 'text');
    $('#password').val('Password');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><formenctype="application/x-www-form-urlencoded" method="post" action="/auth/sign-in">
  <ol>
    <li>
      <div class="element">
        <input type="text" name="username" id="username" value="Prihlasovacie meno" class="input-text" />
      </div>
    </li>
    <li>
      <div class="element">
        <input type="password" name="password" id="password" value="" class="input-text" />
      </div>
    </li>
    <li class="button">
      <div class="button">
        <input type="submit" name="sign_in" id="sign_in" value="Prihlásiť" class="input-submit" />
      </div>
    </li>
  </ol>
</form>

To learn more, you can view here