web-dev-qa-db-ja.com

ブートボックス内の複数の入力

BootstrapのBootboxに1つではなく2つの入力を含めるにはどうすればよいですか？

モーダルダイアログで2つの値を受け取る必要があります。

javascripttwitter-bootstrapbootbox
22
kambi

実際、ブートボックスコードを変更する必要のない、より簡単な方法があります。

ブートボックスの作成時に渡す文字列はテキストのみである必要はありません。HTMLコードでもかまいません。つまり、ほとんどすべてのものをボックスに含めることができます。

ブートボックスにカスタムフォームを配置するには、次のように作成できます。

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

私はちょうどそのための機能を作りました、それをチェックしてください- ここ

使用例

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

私にとって、これはそれを行う最もクリーンな方法です：

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

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

必要なものの基本的な例を次に示します（ノックアウトを使用）

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

2
MTZ4

ブートボックスからダイアログ関数をロードする独自の関数を作成する必要があります。

最も簡単な方法は、ソースからプロンプト機能をコピーすることです： 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());
        }
    };
2
Piotr Stapp

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タグ内のどこにでもフォームを作成できますが、入力が隠されているため表示されません。

お役に立てば幸いです！

0
Tim Predaina