SachiDangalla SachiDangalla - 11 days ago 6
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

onchange
event to the selector as in the following, which I hoped would update the extension in
accept
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
accept
in the input where the HTML is built from string?

JSFiddle

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

Answer

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.

Comments