twitter-bootstrap Bootbox 中的多个输入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16789706/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Multiple inputs in a Bootbox
提问by kambi
How can I have 2 inputs instead of just one in Bootstrap's Bootbox?
如何在 Bootstrap 的 Bootbox 中拥有 2 个输入而不是只有一个？
I need to receive 2 values in a modal dialog.
我需要在模态对话框中接收 2 个值。
回答by haradwaith
Actually, there is a simpler way which doesn't require you to modify bootbox code.
实际上，有一种更简单的方法不需要您修改引导箱代码。
The string you pass at the bootbox creation doesn't have to be only text: it can also be html code. That means you can include pretty much everything in the box.
您在创建 bootbox 时传递的字符串不必只是文本：它也可以是 html 代码。这意味着您可以在框中包含几乎所有内容。
To put a custom form in a bootbox, you can then create it as follow :
要将自定义表单放入引导箱，您可以按如下方式创建它：
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();
});
回答by igor
I just made function for that, check it out - here
我只是为此做了功能，检查一下 -在这里
Usage example
使用示例
bootbox.form({
title: 'User details',
fields: {
name: {
label: 'Name',
value: 'John Connor',
type: 'text'
},
email: {
label: 'E-mail',
type: 'email',
value: '[email protected]'
},
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)
}
})
回答by Nathan Delhaye
For me, this is the cleanest way to do it :
对我来说，这是最干净的方法：
var form = $('<form><input name="usernameInput"/></form>');
bootbox.alert(form,function(){
var username = form.find('input[name=usernameInput]').val();
console.log(username);
});
回答by witek1902
Create hidden div with form in HTML and inject this html to bootbox message. Snippet below.
使用 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>回答by MTZ4
Here is a basic example for what you need (using 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());
Just add as many fields and bind them in the view model
只需添加尽可能多的字段并将它们绑定到视图模型中
回答by Piotr Stapp
You have to write your own function which will load dialog function from bootbox.
您必须编写自己的函数，该函数将从引导箱加载对话框函数。
The easiest way is to copy prompt function from source: https://raw.github.com/makeusabrew/bootbox/v3.2.0/bootbox.js
最简单的方法是从源码复制提示功能：https: //raw.github.com/makeusabrew/bootbox/v3.2.0/bootbox.js
and change this part for adding new input (or whatever you need)
并更改此部分以添加新输入（或您需要的任何内容）
// let's keep a reference to the form object for later
var form = $("<form></form>");
form.append("<input autocomplete=off type=text value='" + defaultVal + "' />");
and this part for getting result:
这部分用于获得结果：
var confirmCallback = function() {
if (typeof cb === 'function') {
return cb(form.find("input[type=text]").val());
}
};
回答by Tim Predaina
haradwaithHas the best solution for posting form data from a bootbox. Because it works, it's simple and because he demonstrates how to Actually Submit the Form. His solution:
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();
});
Moving the <form> tag outside of the bootbox object allows the use of PHP when posting to self and to include hidden inputs without all the clutter.
将 <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>
Now you can check for $_POST['created']
现在您可以检查 $_POST['created']
<?php
if(isset($_POST['created'])){
echo "Timestamp: ".$_POST['created']; // great things happen here
}
?>
You can create the form anywhere in the body tag, it won't display because the inputs are hidden.
您可以在 body 标签的任何位置创建表单，它不会显示，因为输入是隐藏的。
Hope that helps!
希望有帮助！
回答by Quiver
I know this question is pretty old now, but this is the way I've done it. I think this way is great for larger forms as putting all of the HTMLin JavaScriptcan get ugly pretty quick.
我知道这个问题现在已经很老了，但这就是我所做的。我认为这种方式对于较大的表单非常有用，因为将所有内容HTML放入JavaScript会很快变得丑陋。
This example uses Bootstrapbut the idea is the same. Create a hidden form in HTMLand then select it using JavaScriptor JQuery.
这个例子使用Bootstrap但思路是一样的。在 中创建一个隐藏表单HTML，然后使用JavaScript或选择它JQuery。
HTML:
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 Version:
JavaScript 版本：
var form = document.getElementById("hiddenForm").innerHTML;
bootbox.confirm({
message: form,
callback: function (result) {
// do something
}
});
JQuery Version:
jQuery 版本：
var form = $("#hiddenForm").html();
bootbox.confirm({
message: form,
callback: function (result) {
// do something
}
});
Note:
笔记：
When you try to serialize the form for posting, you'll have to make sure you are actually targeting the right form. $("#myForm").serialize()will most likely not work as it will grab the actual HTMLform that you built earlier. So instead, you should do something like $(".bootbox-body #myForm").serialize()to get the current form's values.
当您尝试将表单序列化以进行发布时，您必须确保您实际上是针对正确的表单。$("#myForm").serialize()很可能不会工作，因为它会抓取HTML您之前构建的实际表单。因此，您应该做一些类似的事情$(".bootbox-body #myForm").serialize()来获取当前表单的值。
