Change the input field type with jQuery

Asked

Viewed 470 times

-2

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

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

It doesn’t 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

  • It was not clear his doubt.

  • 1

    I want to change the type of password input to text with jquery.

  • Which jQuery version is using?

  • I’m using version 3.3.1.

  • 1

    Related answer

1 answer

1


Your code didn’t work with attr pq you are using the current version of jQuery 3.3.1 using the prop to work with attributes the attr was used until versions 1.6:

$(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>

<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>

To learn more you can see here

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.