如何在 Bootstrap 的 Bootbox 中有 2 个输入而不是只有一个？
我需要在模式对话框中接收 2 个值。
问问题
43043 次
8 回答
51
实际上，有一种更简单的方法不需要您修改引导箱代码。
您在创建引导箱时传递的字符串不必只是文本：它也可以是 html 代码。这意味着您可以在框中包含几乎所有内容。
要将自定义表单放入 bootbox，您可以按如下方式创建它：
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();
});
于 2013-09-03T09:29:08.130 回答
8
我刚刚为此做了功能，检查一下 -在这里
使用示例
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)
}
})
于 2013-12-10T17:45:26.773 回答
5
对我来说，这是最干净的方法：
var form = $('<form><input name="usernameInput"/></form>');
bootbox.alert(form,function(){
var username = form.find('input[name=usernameInput]').val();
console.log(username);
});
于 2013-11-25T17:26:47.873 回答
3
在 HTML 中创建带有表单的隐藏 div 并将此 html 注入到引导箱消息中。片段如下。
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>于 2018-01-24T13:40:47.813 回答
2
您必须编写自己的函数，该函数将从引导箱加载对话框功能。
最简单的方法是从源代码复制提示功能：https ://raw.github.com/makeusabrew/bootbox/v3.2.0/bootbox.js
并更改此部分以添加新输入（或您需要的任何内容）
// let's keep a reference to the form object for later
var form = $("<form></form>");
form.append("<input autocomplete=off type=text value='" + defaultVal + "' />");
这部分用于获得结果：
var confirmCallback = function() {
if (typeof cb === 'function') {
return cb(form.find("input[type=text]").val());
}
};
于 2013-05-28T12:23:09.983 回答
2
这是您需要的基本示例（使用淘汰赛）
<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());
只需添加尽可能多的字段并将它们绑定到视图模型中
于 2014-12-03T10:58:49.687 回答
0
haradwaith拥有从引导箱发布表单数据的最佳解决方案。因为它有效，所以它很简单，因为他演示了如何实际提交表单。他的解决方案：
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();
});
将 <form> 标记移到 bootbox 对象之外允许在发布到 self 时使用 PHP，并包含隐藏的输入而不会造成混乱。
<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>
现在您可以检查 $_POST['created']
<?php
if(isset($_POST['created'])){
echo "Timestamp: ".$_POST['created']; // great things happen here
}
?>
您可以在 body 标记中的任何位置创建表单，它不会显示，因为输入是隐藏的。
希望有帮助！
于 2017-05-10T00:51:49.993 回答
0
我知道这个问题现在已经很老了，但我就是这样做的。我认为这种方式非常适合较大的表格，因为将所有内容放入其中HTML会JavaScript很快变得丑陋。
这个例子使用Bootstrap但想法是一样的。在其中创建一个隐藏表单，HTML然后使用JavaScript或选择它JQuery。
HTML：
<div id="hiddenForm" class="hidden">
<form id="myForm" class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2">First Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="FirstName" />
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Last Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="LastName" />
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">City</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="City" />
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">State</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="State" />
</div>
</div>
</form>
</div>
JavaScript 版本：
var form = document.getElementById("hiddenForm").innerHTML;
bootbox.confirm({
message: form,
callback: function (result) {
// do something
}
});
jQuery版本：
var form = $("#hiddenForm").html();
bootbox.confirm({
message: form,
callback: function (result) {
// do something
}
});
笔记：
当您尝试序列化表单以进行发布时，您必须确保您实际上定位到正确的表单。$("#myForm").serialize()很可能无法正常工作，因为它会获取HTML您之前构建的实际表单。因此，您应该执行类似$(".bootbox-body #myForm").serialize()获取当前表单值的操作。
于 2019-09-17T20:36:50.357 回答