CODEWITHSUNDEEP
jqueryattributes
James
James

Reputation: 43647

jQuery change input type

Trying to change input type attribute from password to text.

$('.form').find('input:password').attr({type:"text"});

Why this doesn't work?

Upvotes: 39

Views: 96030

Answers (10)

Literate Corvette
Literate Corvette

Reputation: 395

    //Get current input object
    var oldInput = $('foo');
    //Clone a new input object from it
    var newInput = oldInput.clone();
    //Set the new object's type property
    newInput.prop('type','text');
    //Replace the old input object with the new one.
    oldInput.replaceWith(newInput);

Upvotes: 0

Callat
Callat

Reputation: 3044

It's 2018 and jQuery does support this feature now. The following will work:

$('.form').find('input:password').attr("type","text");

Upvotes: 9

Haze
Haze

Reputation: 196

This is pretty easy thou. This works pretty fine.

 $('#btn_showHide').on('click', function() {
    if($(this).text() == 'Show')
    {
      $(this).text('Hide');
      $('#code').attr('type', 'text');
    }
    else
    {
      $(this).text('Show');
      $('#code').attr('type', 'password');
    }
  });

Upvotes: -1

Viktor
Viktor

Reputation: 1

function passShowHide(){
  if( $("#YourCheckBoxID").prop('checked') ){
    document.getElementById("EnterPass").attributes["type"].value = "text";
  }
  else{
    document.getElementById("EnterPass").attributes["type"].value="password";}

Upvotes: -1

venkat7668
venkat7668

Reputation: 2767

USE prop instead attr

$('.form').find('input:password').prop({type:"text"});

Upvotes: 22

prog_24
prog_24

Reputation: 800

This should work easily.

$("selector").attr('type', 'hidden'); 
//Changing it to hidden

Upvotes: 7

Pat
Pat

Reputation: 303

Here are two functions, accepting an array of selector(s) as a parameter that will accomplish this:

  // Turn input into Number keyboard
  function inputNumber(numArr) {
    if (numArr instanceof Array) {
      for (var i = 0; i < numArr.length; i++) {
        if ($(numArr[i]).length > 0) {
          var copy = $(numArr[i]);
          var numEle = copy.clone();
          numEle.attr("type", "number");
          numEle.insertBefore(copy);
          copy.remove();
        }
      }
    }
  }
  // Turn input into Email keyboard 
  function inputEmail(emailArr) {
    if (emailArr instanceof Array) {
      for (var i = 0; i < emailArr.length; i++) {
        if ($(emailArr[i]).length > 0) {            
          var copy = $(emailArr[i]);
          var numEle = copy.clone();
          numEle.attr("type", "number");
          numEle.insertBefore(copy);
          copy.remove();
        }
      }
    }
  }

You can then use this like:

  var numberArr = ["#some-input-id", "#another-input-id"];
  var emailArr = ["#some-input-id", "#another-input-id"];

  inputNumber(numberArr);
  inputEmail(emailArr);

Upvotes: -1

JasCav
JasCav

Reputation: 34632

I know I'm a little late to the game, but I was just able to do this in IE9 (it appears that Microsoft decided to allow it?). However, I had to do it with straight JavaScript. This is just a sample of a form with a dropdownlist that changes the field type depending on what is selected in the dropdown.

function switchSearchFieldType(toPassword) {
    $('#SearchFieldText').val('');
    if (toPassword === true) {
        $('#SearchFieldText').get(0).setAttribute('type', 'password');
    } else {
        $('#SearchFieldText').get(0).setAttribute('type', 'text');
    }
}

$('#SelectedDropDownValue').change(function () {
    if ($("select option:selected").val() === 'password') {
        switchSearchFieldType(true);
    }
    else {
        switchSearchFieldType(false);
    }
}).change();

Upvotes: 10

Alon
Alon

Reputation: 879

my solution:

    $('#myinput').clone().attr('type','tel').insertAfter('#myinput').prev().remove();

Upvotes: 58

Nick Craver
Nick Craver

Reputation: 630389

You can't do this with jQuery, it explicitly forbids it because IE doesn't support it (check your console you'll see an error.

You have to remove the input and create a new one if that's what you're after, for example:

$('.form').find('input:password').each(function() {
   $("<input type='text' />").attr({ name: this.name, value: this.value }).insertBefore(this);
}).remove();

You can give it a try here

To be clear on the restriction, jQuery will not allow changing type on a <button> or <input> so the behavior is cross-browser consistent (since IE doens't allow it, they decided it's disallowed everywhere). When trying you'll get this error in the console:

Error: type property can't be changed

Upvotes: 54

Related Questions