在Bootbox中使用多个输入框

Question

如何在Bootstrap的Bootbox中使用两个输入框而不是一个？

我需要在模态对话框中接收两个值。

- kambi

Answer 1

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

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

- haradwaith

---

你如何访问表单内容？ - brianfit

Answer 2

我刚刚为此创建了一个函数，请查看这里

用法示例

bootbox.form({
    title: 'User details',
    fields: {
        name: {
            label: 'Name',
            value: 'John Connor',
            type:  'text'
        },
        email: {
            label: 'E-mail',
            type:  'email',
            value: '[e-mail]'
        },
        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)
    }
})

- igor

---

很酷的功能！如果您尝试添加占位符，文本输入会出现问题，@kitty有更新计划吗？ - Havihavi

@Havihavi，我肯定会查看它，请在 https://github.com/kittee/bootbox/issues 上描述问题。 - igor

Answer 3

对我来说，这是最简洁的做法：

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

- Nathan Delhaye

Answer 4

在HTML中创建一个带有表单的隐藏div，并将此html注入到bootbox消息中。下面是代码片段。

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>

- witek1902

---

谢谢，我更喜欢这种方法，因为HTML不是一个构造的字符串，这样更容易操作，将值加载到选择输入中等。 - msulis

Answer 5

这是一个基本示例，涉及到你所需的内容（使用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());

只需添加尽可能多的字段并将它们绑定到视图模型中即可。 http://jsfiddle.net/6vb7e224/2/

- MTZ4

Answer 6

你需要编写自己的函数，该函数将从bootbox中加载对话框功能。

最简单的方法是从源代码中复制prompt函数：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());
        }
    };

- Piotr Stapp

Answer 7

我知道这个问题现在已经很老了，但这是我做的方式。我认为对于更大的表单来说，这种方式非常好，因为把所有的 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() 的操作，以获取当前表单的值。

- Quiver

Answer 8

haradwaith 提供了最佳的解决方案，用于从 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();
});

将 <form> 标签移出 bootbox 对象，可以在提交到自身时使用 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 标签的任何位置创建表单，因为输入框是隐藏的，所以不会显示出来。

希望这能帮到您！

- Tim Predaina