form multiple inputs in a Bootbox modal

Type1:

bootbox.confirm("<form id='formId' action=''>\
    First name:<input type='text' name='fname' /><br/>\
    Last name:<input type='text' name='lname' />\
    </form>", function(result) {
        if(result)
            $('#formId').submit();
});

Type2: 
BOOTBOX form with datepicker modal calendar:

<-----HTML Code----->
<button class="add_date_btn btn btn-primary btn-sm">View modal with date</button>

 

<!——–CSS Code —->

.ui-datepicker{
z-index: 9999999 !important;
}

<!———-JavaScript + JQuery 1.9.1 Code—–>

var datepicker_opts = {
    changeMonth: true,
    changeYear: true,
    dateFormat: 'mm/dd/yy',
    altFormat: "yymmdd",
    setDate: new Date(),
    maxDate: new Date()					
  };

BootboxContent = function(){    
var frm_str = '<form id="formId">'
+'<div class="form-group">'
+ '<label for="date">Date</label>' 
+ '<input id="date" class="date span2 form-control input-sm" size="16" placeholder="mm/dd/yy" type="text">'
+ '</div>'
+ '</form>';

var object = $('<div/>').html(frm_str).contents();

object.find('.date').datepicker(
$.extend({
beforeShow: function(elem, inst) {
$(document).off('focusin.bs.modal');
},
onClose: function(selectedDate, inst) {
$modal = $(inst.input[0]).closest(".modal").data('bs.modal');
$modal.enforceFocus(); 
}
}, datepicker_opts)
);

return object
}
$('.add_date_btn').on('click', function () {
bootbox.dialog({
message: BootboxContent,
title: "View modal with date",
buttons: {
cancelar: {
label: "Cancel",
className: "btn-default"
}
}
});
}); //End click

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: