Mehrere Eingänge in einem Bootbox

Question

Wie kann ich zwei Eingänge statt nur einen in Bootstrap des Bootbox?

Ich brauche zwei Werte in einem modalen Dialogfeld zu erhalten.

Answer 1

Eigentlich gibt es eine einfachere Art und Weise, die Sie nicht benötigen Bootbox Code zu ändern.

Die Zeichenfolge, die Sie an der Bootbox Schöpfung passieren muss nicht nur Text sein: es kann auch HTML-Code sein. Das bedeutet, dass Sie so ziemlich alles in die Box aufnehmen können.

Um eine benutzerdefinierte Form in einem Bootbox zu setzen, können Sie es wie folgt dann erstellen:

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

Sie haben eine eigene Funktion zu schreiben, die Dialogfunktion von Bootbox geladen werden.

Der einfachste Weg ist die schnelle Funktion von der Quelle zu kopieren: https://raw.github.com/makeusabrew/bootbox/v3.2.0/bootbox.js

und diesen Teil ändern neue Eingabe für das Hinzufügen (oder was auch immer Sie benötigen)

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

und diesen Teil für das Erhalten Ergebnis:

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

Answer 3

Für mich ist dies der sauberste Weg, es zu tun:

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

Answer 4

Ich habe gerade Funktion für das, check it out - here

Anwendungsbeispiel

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) 
    } 
}) 

Hier

Answer 5

ist ein einfaches Beispiel für das, was Sie brauchen (mit Knockout)

<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()); 

Wie viele Felder hinzufügen und binden sie in der Ansicht Modell

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

Answer 6

haradwaith hat die beste Lösung zum Veröffentlichen von Formulardaten aus einer Bootbox. Weil es funktioniert, ist es einfach und weil er zeigt, wie man das Formular tatsächlich einreicht. Seine Lösung:

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(); 
}); 

Verschieben des <Form> Tag außerhalb des Bootbox Objekt ermöglicht die Verwendung von PHP, wenn sie sich selbst veröffentlichen und versteckte Eingänge ohne den ganzen Krempel aufzunehmen.

<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> 

Jetzt können Sie für $ _POST überprüfen [ ‚erstellt‘]

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

Sie können das Formular überall im Körper Tag erstellen, wird es nicht angezeigt, da die Eingänge versteckt sind.

Hoffe, dass hilft!

Answer 7

Erstellen Sie versteckte Div mit Formular in HTML und injizieren Sie diese HTML Bootbox-Nachricht. Snippet unten.

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>