Change Input Type

Question

Hi Everyone:

I am working on a fairly dynamic site, and I want the user to be able to choose what they want to input. The input choices are the various types of input (text, password, etc.) Is there some style/way to create this? I was thinking that they choose from a drop down menu and then Javascript takes care of the rest. But I would think that there must be some established way to deal with this that I'm just not finding on the web.

Thanks for any help.

Answer 1

In Javascript, you would create an input as follows.

var input = document.createElement('input');
input.type = 'button';
...

So, if you would like to create inputs on the fly, you could create a dropdown that lists the types of inputs as strings (button, text, etc.). Then, once the user had chosen the string in the dropdown, you would pass it to a Javascript function like the following:

function createInput(type) {
  var input = document.createElement('input');
  input.type = type
  ...
  return input;
}

Then, if you wanted to append the input to an element on the page with id 'foo':

var input = createInput('button');
var appendToThis = document.getElementById('foo');
appendToThis.appendChild(input);

If you would like to start with a div on the page, imagine you have a div tag with id foo on the page:

<div id=foo><input type=text></div>

Then, when the user chooses an item, clear the div and make a new input:

function whenUserChoosesAType(type) {
  var div = document.getElementById('foo');
  rac(div);
  var input = document.createElement('input');
  div.appendChild(input);
}      

//abbreviated function to clear the contents of a DOM element such as a div
function rac(elem) {
  while(elem.hasChildNodes()) elem.removeChild(elem.firstChild);
}

Answer 2

I originally answered your questions like this:

<input type="text" id="changingInput">
<input type="button" value="Click Here For Example Of Changing" onclick="javascript:document.getElementById('changingInput').type = 'password';">

But then I checked and it didn't work in IE... or course.(it DOES work wonderfully in Safari) So i found this great link here:

http://www.universalwebservices.net/web-programming-resources/javascript/change-input-element-type-using-javascript

Hope this helps!