Bootbox 中的多个输入答案

【问题标题】：Multiple inputs in a BootboxBootbox 中的多个输入
【发布时间】：2013-05-28 10:27:05
【问题描述】：

如何在 Bootstrap 的 Bootbox 中有 2 个输入而不是只有一个？

我需要在模式对话框中接收 2 个值。

【问题讨论】：

标签： javascript twitter-bootstrap bootbox

【解决方案1】：

其实有一种更简单的方法，不需要你修改bootbox代码。

您在创建引导箱时传递的字符串不必只是文本：它也可以是 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();
});

【讨论】：

如何访问表单内容？

【解决方案2】：

我刚刚为此创建了函数，请查看 - here

使用示例

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

【讨论】：

很酷的功能！如果您尝试添加占位符，文本输入会损坏，有没有更新它的计划@kitty？
@Havihavi 我一定会看看的，问题请在github.com/kittee/bootbox/issues描述问题

【解决方案3】：

对我来说，这是最干净的方法：

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

【讨论】：

【解决方案4】：

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

【讨论】：

谢谢，我更喜欢这种方法，因为 HTML 不是构造字符串，因此更易于操作、将值加载到选择输入等。

【解决方案5】：

您必须编写自己的函数，该函数将从 bootbox 加载对话框函数。

最简单的方法是从源复制提示功能：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());
        }
    };

【讨论】：

【解决方案6】：

这是您需要的基本示例（使用淘汰赛）

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

只需添加尽可能多的字段并将它们绑定到视图模型中

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

【讨论】：

【解决方案7】：

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

将

标记移到 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标签的任何地方创建表单，它不会显示，因为输入是隐藏的。

希望有帮助！

【讨论】：

【解决方案8】：

我知道这个问题现在已经很老了，但我就是这样做的。我认为这种方式非常适合较大的表单，因为将所有 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() 的操作来获取当前表单的值。

【讨论】：