BaconPancakes BaconPancakes - 3 months ago 16
jQuery Question

setting input type in dynamically created form is ignored

I'm clicking a button to bring up a bootstrap-modal with a dynamically created form inside. My problem is that the input fields are always treated as text, even though they are set to something else like select, readonly or number.

Here you can see that the inputs have the right type-values, but the inputs are textfields anyway.

The form is created here (the outputs of console.log can be seen in the picture):

var data = "";

data += "<form name='altEditor-form' role='form'>";

for(var j = 0; j < columnDefs.length; j++){

//Outputting input title and input.type
console.log(j + ": " + columnDefs[j].title + " - " + columnTypes[j].type)

data += "<div class='form-group'><div class='col-sm-3 col-md-3 col-lg-3 text-right' style='padding-top:7px;'><label for='" + columnDefs[j].title + "'>" + columnDefs[j].title + ":</label></div><div class='col-sm-9 col-md-9 col-lg-9'><input type='" + columnTypes[j].type + "' id='" + columnDefs[j].title + "' name='" + columnDefs[j].title + "' placeholder='" + columnDefs[j].title + "' style='overflow:hidden' class='form-control form-control-sm' value='" + adata.data()[0][newaData[j].name] + "'></div><div style='clear:both;'></div></div>";
}

data += "</form>";


As you can see I set the input type like this:

<input type='" + columnTypes[j].type + "' ....


The form is then added to the modal here:

$('#altEditor-modal').find('.modal-body').html(data);


I can't make any sense of it. How is it possible that the type is completely ignored?

Answer

You're setting invalid type values, which the browser will in turn ignore treating those inputs as type="text": input's default type value.

As of this post, valid type values for input elements are:

  • button
  • checkbox
  • color
  • date
  • datetime
  • datetime-local
  • email
  • file
  • hidden
  • image
  • month
  • number
  • password
  • radio
  • range
  • reset
  • search
  • submit
  • tel
  • text
  • time
  • url
  • week

readonly and select are not valid type values.