Nhiều đầu vào trong Bootbox

Question

Làm cách nào để có 2 đầu vào thay vì chỉ có một đầu vào trong Bootbox của Bootstrap?

Tôi cần nhận 2 giá trị trong hộp thoại phương thức.

Answer 1

Thực ra, có một cách đơn giản hơn không yêu cầu bạn phải sửa đổi mã hộp khởi động.

Chuỗi bạn vượt qua khi tạo hộp khởi động không chỉ là văn bản: nó còn có thể là mã html. Điều đó có nghĩa là bạn có thể bao gồm khá nhiều thứ trong hộp.

Để đưa một hình thức tùy chỉnh trong một bootbox, bạn có thể tạo ra nó như sau:

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

Bạn phải viết chức năng của riêng bạn sẽ tải chức năng hộp thoại từ hộp khởi động.

Cách đơn giản nhất là để sao chép chức năng nhắc nhở từ nguồn: https://raw.github.com/makeusabrew/bootbox/v3.2.0/bootbox.js

và thay đổi phần này để thêm vào mới (hoặc bất cứ điều gì bạn cần)

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

và phần này để có được kết quả:

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

Answer 3

Đối với tôi, đây là cách sạch nhất để làm điều đó:

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

Answer 4

Tôi chỉ cần thực hiện chức năng cho rằng, check it out - here

Cách sử dụng ví dụ

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

Dưới đây là một ví dụ cơ bản cho những gì bạn cần (sử dụng loại trực tiếp)

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

Chỉ cần thêm bao nhiêu lĩnh vực và ràng buộc họ trong mô hình xem

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

Answer 6

haradwaith Có là tốt nhất giải pháp để đăng dữ liệu biểu mẫu từ hộp khởi động. Bởi vì nó hoạt động, nó đơn giản và bởi vì anh ta chứng tỏ làm thế nào để thực sự gửi mẫu. Giải pháp của ông:

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

Di chuyển < dạng > thẻ bên ngoài của đối tượng bootbox cho phép sử dụng PHP khi gửi bài đến bản thân và để bao gồm đầu vào ẩn mà không cần tất cả sự lộn xộn.

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

Bây giờ bạn có thể kiểm tra với $ _POST [ 'tạo ra']

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

Bạn có thể tạo các hình thức bất cứ nơi nào trong thẻ cơ thể, nó sẽ không hiển thị bởi vì các yếu tố đầu được ẩn.

Hy vọng điều đó sẽ hữu ích!

Answer 7

Tạo div ẩn với biểu mẫu trong HTML và đưa thông báo html này vào hộp khởi động. Đoạn trích bên dưới.

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>