Wiele wejść w Bootbox

Question

Jak mogę mieć 2 wejścia zamiast tylko jednego w Bootbox Bootbox?

Potrzebuję otrzymać 2 wartości w modalnym oknie dialogowym.

Answer 1

W rzeczywistości istnieje prostszy sposób, który nie wymaga modyfikacji kodu bootbox.

Ciąg znaków przekazywany podczas tworzenia bootboxu nie musi być tylko tekstem: może to być również kod HTML. Oznacza to, że możesz włożyć prawie wszystko do pudełka.

Aby umieścić niestandardowy formularz w bootbox można następnie utworzyć go następująco:

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

Musisz napisać własną funkcję, która załaduje funkcję dialogową z bootbox.

Najprostszym sposobem jest skopiowanie funkcji monitorowania ze źródła: https://raw.github.com/makeusabrew/bootbox/v3.2.0/bootbox.js

i zmienić tę część za dodanie nowego wejścia (lub cokolwiek chcesz)

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

i tę część na skutek coraz:

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

Answer 3

Dla mnie to jest najczystszym sposobem, aby to zrobić:

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

Answer 4

Zrobiłem funkcja, że ​​to sprawdzić - here

Przykład użycia

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

Oto prosty przykład na to, czego potrzebujesz (przy użyciu nokaut)

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

Wystarczy dodać dowolną liczbę pól i powiązać je w modelu widoku

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

Answer 6

haradwaith ma najlepsze rozwiązanie do publikowania danych formularzy z bootbox. Ponieważ to działa, jest proste i ponieważ demonstruje, jak właściwie przesłać formularz. Jego rozwiązanie:

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

Przesuwanie <formularz> tag zewnątrz obiektu bootbox umożliwia korzystanie z PHP podczas wysyłania do siebie i zawierają ukrytych wejść bez wszystkich bałaganu.

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

Teraz można sprawdzić za $ _ POST [ „stworzył”]

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

Można utworzyć formularz w dowolnym miejscu w tagu ciała, to nie będą wyświetlane, ponieważ wejścia są ukryte.

Nadzieję, że pomaga!

Answer 7

Utwórz ukryty element div za pomocą formularza w HTML i wpisz ten html do wiadomości bootbox. Snippet poniżej.

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>