SachiDangalla SachiDangalla - 2 months ago 18
HTML Question

How to set events in HTML built from string?

I have used a Bootstrap dialog box to get a file input, where the user first selects the type and then selects the file - I want to limit the files by extension with regard to the type selected.

Bootstrap dialog is built by a string and I was thinking of adding an

event to the selector as in the following, which I hoped would update the extension in
in file input - but it gives an error
setType is not defined

How can I correctly dynamically capture the selected type and set it in the
in the input where the HTML is built from string?


var HTMLmessage = 'Type: <select onchange="setType(this)"> ..Option list </select> <br> <input type="file" accept=' + getType() + '>';


You can simply use jQuery for this. and use on(change) event of jQuery. Here is the FIDDLE.

Piece of code

$(document).on("change", '#load-file-type', function(event) { 
  getType = $(this).find('option:selected').attr('data-ext');
  $('#load-file').attr('accept',getType); // simply using this you can set it in the `accept` in file input.

Which allow you to trigger event on change.