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.

Bootstrap 3 has already has an event called show and shown, you can use that. [See here](http://getbootstrap.com/javascript/#modals). — anpsmn, Jan 05 '15 at 10:59
$('#myModal').on('show.bs.modal', function (e) { ...CODE Here... }) — axel.michel, Jan 05 '15 at 11:01
@anpsmn, thanks for your feedback but that doesn't load the bootstrap modal with the value of title pre-filled with document.title value. — Brayoni, Jan 06 '15 at 11:46
@B.I.B Yeah. I was suggesting that Bootstrap has show/shown event which you can see in the docs and use it just like the below answer. — anpsmn, Jan 06 '15 at 11:57

score 2 · Accepted Answer · answered Jan 05 '15 at 11:04

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.

Prefill bootstrap modal form field with data

1 Answers1