web-dev-qa-db-fra.com

Entrées multiples dans une boîte de démarrage

Comment puis-je avoir 2 entrées au lieu d'une seule dans la Bootbox de Bootstrap?

J'ai besoin de recevoir 2 valeurs dans un dialogue modal.

javascripttwitter-bootstrapbootbox
20
kambi

En fait, il existe un moyen plus simple qui ne vous oblige pas à modifier le code de démarrage.

La chaîne que vous transmettez lors de la création de la boîte de démarrage ne doit pas nécessairement être du texte: il peut également s'agir de code html. Cela signifie que vous pouvez inclure à peu près tout dans la boîte.

Pour mettre un formulaire personnalisé dans une boîte de démarrage, vous pouvez ensuite le créer comme suit:

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

Je viens de faire fonctionner pour ça, vérifie - ici

Exemple d'utilisation

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

Voici un exemple de base pour ce dont vous avez besoin (en utilisant 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());

Il suffit d'ajouter autant de champs et de les lier dans le modèle de vue

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

2
MTZ4

Vous devez écrire votre propre fonction qui chargera la fonction de dialogue à partir de bootbox.

Le moyen le plus simple est de copier la fonction Invite à partir de la source: https://raw.github.com/makeusabrew/bootbox/v3.2.0/bootbox.js

et changez cette partie pour ajouter de nouvelles entrées (ou ce dont vous avez besoin)

    // let's keep a reference to the form object for later
    var form = $("<form></form>");
    form.append("<input autocomplete=off type=text value='" + defaultVal + "' />");

et cette partie pour obtenir le résultat:

    var confirmCallback = function() {
        if (typeof cb === 'function') {
            return cb(form.find("input[type=text]").val());
        }
    };
2
Piotr Stapp

Pour moi, c'est la manière la plus propre de le faire:

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

Créez un div caché avec un formulaire en HTML et injectez ce message html dans le message bootbox. Extrait ci-dessous. 

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>

2
witek1902

haradwaith A la meilleure solution pour poster des données de formulaire à partir d'une boîte de démarrage. Parce que cela fonctionne, c'est simple et parce qu'il montre comment soumettre le formulaire. Sa solution:

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

Déplacer la balise <form> en dehors de l'objet bootbox permet d'utiliser PHP lors de la publication pour soi-même et d'inclure des entrées masquées sans tout l'encombrement. 

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

Maintenant, vous pouvez vérifier pour $ _POST ['created']

<?php
if(isset($_POST['created'])){
     echo "Timestamp: ".$_POST['created']; // great things happen here
    }
?>

Vous pouvez créer le formulaire n'importe où dans la balise body, il ne s'affichera pas car les entrées sont masquées.

J'espère que cela pourra aider!

0
Tim Predaina