Как я могу использовать 2 входа вместо одного в Bootstrap Bootbox?
Мне нужно получить 2 значения в модальном диалоговом окне.
Несколько входов в Bootbox
Ответ 1
На самом деле существует более простой способ, который не требует изменения кода загрузки.
Строка, передаваемая при создании bootbox, не обязательно должна быть только текстом: она также может быть 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();
});
Ответ 2
Я только что сделал для этого функцию, проверьте это - здесь
Пример использования
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)
}
})
Ответ 3
Для меня это самый чистый способ сделать это:
var form = $('<form><input name="usernameInput"/></form>');
bootbox.alert(form,function(){
var username = form.find('input[name=usernameInput]').val();
console.log(username);
});
Ответ 4
Создайте скрытый div с формой в HTML и вставьте этот 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>Ответ 5
Вам нужно написать свою собственную функцию, которая будет загружать диалоговую функцию из загрузочного окна.
Самый простой способ - скопировать функцию запроса из источника: https://raw.github.com/makeusabrew/bootbox/v3.2.0/bootbox.js
и измените эту часть для добавления нового ввода (или того, что вам нужно)
// let 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());
Просто добавьте столько полей и привяжите их в модели представления
Ответ 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();
});
Перемещение <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
}
?>
Вы можете создать форму в любом месте тега тела, она не будет отображаться, потому что входы скрыты.
Надеюсь, что это поможет!
Ответ 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(), чтобы получить текущие значения формы.