javascript - executing preventDefault() with BootstrapDialog -

i using bootstrapdialog (nakupanda) , selectize (brian reavis)

the process follows:

1. open html defined modal dialog several selectize fields on it, each of has list of items , top of list create new
2. when create new selected onchange event of selectize triggered , call function , opens bootstrapdialog below user input.

the problem when user fills in field , presses enter both first , second dialog box close. happens when user presses enter. not if okay button pressed.

i call event.preventdefault() when open first dialog box not stop problem.

as appreciated.

first modal dialog definition

  <div class="modal  fade " id="mymodal" role="dialog">     <div class="modal-dialog">         <div class="modal-content">             <div class="modal-header">                 <button type="button" class="close" data-dismiss="modal">&times;</button>                 <h4 class="modal-title">modal header</h4>             </div>             <div class="modal-body">                 <div id="newmaterials">                     <label for="new_itemguid">material group</label>                     <div class="row">                         <div class="col-md-10">                             <select name="itemguid  " class="form-control" id="new_itemguid">                                 <option value="">select item</option>                             </select>                         </div>                     </div>                       </div>                 <div class="modal-footer">                     <button type="button" class="btn btn-mini" onclick="okclick()">okay</button>                     <button type="button" class="btn btn-default" onclick="cancelclick()">cancel</button>                            </div>             </div>         </div>     </div> </div> 

the jquery..

$( document )     .ready( function(event)     {         $( "#butnewmatl" ).click(            function(event)            {                event.preventdefault();                opendialogbox();            }        );   }    function opennewmaterialdialogbox() {     $( "#mymodal" ).modal( { backdrop: 'static',keyboard: false } ); }  $selectize = $( '#myfield' ).selectize( {     options......         onchange: function( value )     {            /// bunch of stuff1         getuserinput( "a title" ,dialogdef, "", "okay", "cancel", processesuserinput );      }             });   var dialogdef = function( dialogitself )  {       var $form = $( '<form></form>' );       var $titledrop = $( '<input type="text" class="form-control"/>' )       dialogitself.setdata( 'field-title-drop',$titledrop );   // put in dialog data's container can easier using dialog.getdata() later.        $form.append('<label>new matclass</label>').append($titledrop);                       return $form;  }   function processesuserinput( dialogitself)  {       // stuff        return true;  }       function getuserinput( _title, _msg, _button1text, _button2text,  _okcallback, _cancelcallback )  {       bootstrapdialog.show( {         title: _title,               message: _msg,                onshow: function(event)         {            // event.preventdefault();  // notwork ... event not have method dialog not open          },          buttons: [  {              label: _button1text,              hotkey:13,              action: function( dialogitself )               {                                                                                       var _result = _okcallback( dialogitself );                   if(_result === true)                       dialogitself.close();                                                                 }              },{                label: _button2text,                action: function( dialogitself )                {                      dialogitself.close();                                    }          }]      } );                   }