jquery change input-type

Question

I have an input field which I want to use on mobile and desktop made with Jquery Mobile.

It's a quantity selector field, so depending on input type, the user only has to enter a number or click-increment to 1,2,3,... the number he desires.

Question: Is there a way to switch input type="button" to input type="text" by virtue of a button?

Something like this:

$('.switchInputType').click(function () {
  $(this).val() == "click" ? go_type() : go_click();
});
function go_type() {
  $('.switchInputType').val('type');
  $('.inputElement').attr('type', 'text');
}
function go_click() {
  $('.switchInputType').val('click');                                      
  $('.inputElement').attr('type', 'button'); 
}

This doesn't work? I'm looking for other ideas how to achieve this?

Would it be possible tampering with the JQM generated HTML, as

<input type="button" value="clickMe" />

in JQM looks like this:

<div class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow ui-btn-up-c" 
data-theme="c"  aria-disabled="false">
   <span class="ui-btn-inner ui-btn-corner-all">
       <span class="ui-btn-text">clickMe</span> 
   </span>
   <input class="inputElement ui-btn-hidden" type="button" value="clickMe"
    aria-disabled="false" />
</div>

Thanks for thoughts!

here is the complete code for switching input in Jquery Mobile:

$('.switchInputType').click(function () {
  $(this).val() == "click" ? go_type() : go_click();
});
function go_type() {
 $('.switchInputType').val('type');
 $('.switchInputType').prev('span').html('<span class="ui-btn-text">type</span><span class="ui-icon ui-icon-finger ui-icon-shadow"></span>');
 $('.inputElement').each(function(index) {
    $(this).parent('div').replaceWith('<input type="text" value="'+this.value+'" 
    name="'+this.name+'" id="'+this.id+'" value="'+this.value+'" class="inputElement
    ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-c" />');
    });
 }
 function go_click() {
   $('.switchInputType').val('click');
   $('.switchInputType').prev('span').html('<span class="ui-btn-text">click</span><span
   class="ui-icon ui-icon-finger ui-icon-shadow"></span>');
   $('.inputElement').each(function(index) {
      $(this).replaceWith('<div class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow 
      ui-btn-up-c" data-theme="c" aria-disabled="false"><span class="ui-btn-inner ui-btn-
      corner-all"><span class="ui-btn-text">'+this.value+'</span></span><input 
      type="button" value="'+this.value+'" name="'+this.name+'" id="'+this.id+'" 
      value="'+this.value+'" class="inputElement ui-btn-hidden" data-inline="true" 
      aria-disabled="false" /></div>');
      });
  }

Related to http://stackoverflow.com/questions/1544317/jquery-change-type-of-input-field — thisgeek, Nov 09 '12 at 19:48

score 10 · Accepted Answer · answered May 13 '11 at 14:23

10

It is not possible to change the type as it is read-only. What you can do is something like this:

JSFIDDLE

$('.clicker').bind('click', function() {
    $(this).replaceWith('<input type="text" value="'+this.value+'" id="'+this.id+'">');
});

answered May 13 '11 at 14:23

rsplak

11,428
2
31
30

Works plain = great! - now let's see if I can tackle the extra HTML added by JQM. Thanks so far! – frequent May 13 '11 at 14:40

score 3 · Answer 2 · answered May 13 '11 at 14:22

$('<input type="text" name="" id="" />').insertAfter('input[type=button]');
$('input[type=button]').remove();

// you can gather the attributes u need, assign them to the new input top line, otherwise you will never get it to work because of security reasons of the type="" attribute

jquery change input-type

2 Answers2