Prefill bootstrap modal form field with data

Question

I am creating an extension with bootstrap modal whose form fields are title and description. I would like to pre-fill the title form field with the webpage's title using "document.title".

I have this code in my extension.js;

$("#myModal").bind( 'show', function () {
        $("#title").val(document.title);
});

to prefill the title field which is not working.

I'm open to suggestions on how to fix this.

I'm creating the extension using crossrider api. The extension shows the bootstrap modal upon right-clicking a context menu on a web page. Thanks.

Answer 1

It depends on the bootstrap version you use. Bootstrap provides custom events for most plugins' unique actions. As of 3.0.0, all Bootstrap events are namespaced.

$('#myModal').on('show.bs.modal', function (e) {
   $("#title").val(document.title);
})

Or:

$('#modal-content').on('shown.bs.modal', function() {
    $("#title").val(document.title);
})

It might be a typing error in your question but your selectors can't work. You can use .classes or #ids but not something like title as selector.