CODEWITHSUNDEEP
javascriptjqueryhtml
Sreehari
Sreehari

Reputation: 515

Change type of an Input element using jquery

I am trying to change type of input, specifically after click into input I need to change type="text" to type="date".

<input type="text" placeholder="DOB" id="dob" name="dob" />
<script>
    $("#dob").click(function () {
        $(this).attr('type', 'date');

    });
</script>

I want to accomplish this for a iphone App. This is not working in iphone 4. How can do this?

Upvotes: 12

Views: 55922

Answers (6)

Nishu Tayal
Nishu Tayal

Reputation: 20880

Use this code : 

<input type="text" placeholder="DOB" id="dob" name="dob"  />
<script>
   $("#dob").click(function(){
        $(this).prop('type', 'date');

  });
</script>

Here is the fiddle : http://jsfiddle.net/HNKkW/

Upvotes: 33

ccrez
ccrez

Reputation: 872

for me using prop directly on the element was not working, this however worked for me after a lot of fiddling, so I wanted to share and maybe save someone the headache.

$(document).on('change', '#showPass', function () {
    if ($(this).is(':checked')) {
        $(this).parents('form').find('#passField').prop("type", "text");
    } else {
        $(this).parents('form').find('#passField').prop("type", "password");
    }
});

Upvotes: 0

user3226778
user3226778

Reputation: 1

I think the correct solution for your problem is using the .focus and the .prop properties.

<script>
    $("#dob").focus(function () {
        $(this).prop('type', 'date');

    });
</script>

Upvotes: 0

adeneo
adeneo

Reputation: 318342

It's a property, so prop() will do it :

$("#dob").on('click', function(){
     $(this).prop('type', 'date');
});​

And remember to wrap that in a document.ready function !

FIDDLE

Upvotes: 7

Undefined
Undefined

Reputation: 11429

See this working jsfiddle.

You can't change the type of an input due to restrictions in the browser using .attr. Note this warning you receive from the console:

Uncaught Error: type property can't be changed

You can change the type by using .prop()

$("#dob").on('click', function(){
    $(this).prop('type', 'date');
});​

I think there may be a bit of an underlying problem here. Would the user not be confused by the type of text-box changing?

If at all possible you should try and change the type of the text-box before showing it to the user.

Upvotes: 0

coolguy
coolguy

Reputation: 7954

If you use Earlier version of Jquery

$('body').delegate('#dob','click',function(){
            $(this).attr('type', 'date');

      });

Or if you use latest see @adeno 's answer

Upvotes: 0

Related Questions