Più ingressi in un Bootbox

Question

Come posso avere 2 ingressi invece di uno solo in Bootbox Bootstrap?

Ho bisogno di ricevere 2 valori in una finestra di dialogo modale.

Answer 1

In realtà, esiste un modo più semplice che non richiede la modifica del codice del bootbox.

La stringa che si passa alla creazione del bootbox non deve essere solo testo: può anche essere un codice html. Ciò significa che puoi includere praticamente tutto nella scatola.

di mettere un modulo personalizzato in un bootbox, è possibile crearlo come segue:

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

Answer 2

È necessario scrivere la propria funzione che caricherà la funzione di dialogo dal bootbox.

Il modo più semplice è quello di copiare la funzione rapida dalla fonte: https://raw.github.com/makeusabrew/bootbox/v3.2.0/bootbox.js

e cambiare questa parte per l'aggiunta di nuovi input (o qualunque cosa avete bisogno)

// let's keep a reference to the form object for later 
    var form = $("<form></form>"); 
    form.append("<input autocomplete=off type=text value='" + defaultVal + "' />"); 

e questa parte per ottenere risultato:

var confirmCallback = function() { 
     if (typeof cb === 'function') { 
      return cb(form.find("input[type=text]").val()); 
     } 
    }; 

Answer 3

Per me, questo è il modo più pulito per farlo:

var form = $('<form><input name="usernameInput"/></form>'); 
bootbox.alert(form,function(){ 
    var username = form.find('input[name=usernameInput]').val(); 
    console.log(username); 
}); 

Answer 4

ho appena fatto funzione per questo, verificare - here

esempio di utilizzo

bootbox.form({ 
    title: 'User details', 
    fields: { 
     name: { 
      label: 'Name', 
      value: 'John Connor', 
      type: 'text' 
     }, 
     email: { 
      label: 'E-mail', 
      type: 'email', 
      value: 'johnconnor@skynet.com' 
     }, 
     type: { 
      label: 'Type', 
      type: 'select', 
      options: [ 
       {value: 1, text: 'Human'}, 
       {value: 2, text: 'Robot'} 
      ] 
     }, 
     alive: { 
      label: 'Is alive', 
      type: 'checkbox', 
      value: true 
     }, 
     loves: { 
      label: 'Loves', 
      type: 'checkbox', 
      value: ['bike','mom','vg'], 
      options: [ 
       {value: 'bike', text: 'Motorbike'}, 
       {value: 'mom', text: 'His mom'}, 
       {value: 'vg', text: 'Video games'}, 
       {value: 'kill', text: 'Killing people'} 
      ] 
     }, 
     passwd: { 
      label: 'Password', 
      type: 'password' 
     }, 
     desc: { 
      label: 'Description', 
      type: 'textarea' 
     } 
    }, 
    callback: function (values) { 
     console.log(values) 
    } 
}) 

Answer 5

Ecco un esempio di base per quello che vi serve (con eliminazione diretta)

<button data-bind="click: select">Button</button> 
<script type="text/html" id="add-template"> 
    <div style="display:none"> 
     <input data-bind='value: name' placeholder="Name"> 
    </div> 
</script> 


var viewModel = function() { 
    var self = this; 
    self.name = ko.observable(); 
    self.select = function() { 
     var messageTemplate = $($("#add-template").html()); 
     ko.applyBindings(self, messageTemplate.get(0)); 
     messageTemplate.show(); 
     bootbox.confirm({ 
       title: "Add new", 
       message: messageTemplate, 
       callback: function (value) { 
        // do something 
       } 
      }); 
    } 
} 

ko.applyBindings(new viewModel()); 

Basta aggiungere il maggior numero di campi e legarli nel modello di visualizzazione

http://jsfiddle.net/6vb7e224/2/

Answer 6

haradwaith ha la migliore soluzione per la pubblicazione dei dati del modulo da un bootbox. Perché funziona, è semplice e perché dimostra come presentare effettivamente il modulo. La sua soluzione:

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

Spostando il modulo < > tag al di fuori dell'oggetto bootbox consente l'utilizzo di PHP quando si postano per sé e per includere gli ingressi nascosti senza tutto il disordine.

<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" id="infos"> 
<input type=hidden form="infos" name="created" value="<?php echo date("Y-m-d H:i:s"); ?>" /> 
</form> 

Ora è possibile verificare la presenza di $ _POST [ 'creato']

<?php 
if(isset($_POST['created'])){ 
    echo "Timestamp: ".$_POST['created']; // great things happen here 
    } 
?> 

È possibile creare la forma in qualsiasi parte del tag body, non visualizzerà perché gli ingressi sono nascosti.

Spero che questo aiuti!

Answer 7

Creare un div nascosto con il modulo in HTML e iniettare questo messaggio html nel bootbox. Snippet di seguito.

var buttonClick = function() { 
 
    var bootboxHtml = $('#js-exampleDiv').html().replace('js-exampleForm', 'js-bootboxForm'); 
 
    bootbox.confirm(bootboxHtml, function(result) { 
 
    console.log($('#ex1', '.js-bootboxForm').val()); 
 
    console.log($('#ex2', '.js-bootboxForm').val()); 
 
    }); 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script> 
 

 
<div id="js-exampleDiv" hidden> 
 
    <form class="js-exampleForm"> 
 
    <div class="col-sm-12"> 
 
     <input placeholder="Example placeholder 1" id="ex1" /> 
 
    </div> 
 
    <div class="col-sm-12"> 
 
     <input placeholder="Example placeholder 2" id="ex2" /> 
 
    </div> 
 
    </form> 
 
</div> 
 

 
<button onclick="buttonClick();"> 
 
    Open bootbox confirm dialog. 
 
</button>