In order to display two input fields in a bootbox.confirm box, I've embedded an HTML form in the message field. Everything works fine, but if I enter text in the textarea, the Save button loses focus, and two clicks on the save button are required to execute save and clear the modal. The problem is exterior to the code below, though. This jsfiddle functions just fine with one click. I can't practically share the thousands of lines of codes this sits in, anyone know what might be causing this and how I can fix it?
bootbox.confirm({
title: "Save Foo",
message: '<div class="row"> ' +
'<div class="col-md-12"> ' +
'<div class="text-center">Save</div>' +
'<form class="form-horizontal"> ' +
'<div class="form-group"> ' +
'<label class="col-md-4 control-label" for="Question">Question</label> ' +
'<div class="col-md-4"> ' +
'<input id="name" name="name" type="text" value="Question" class="form-control input-md"> ' +
'<span class="help-block">You can edit your question before saving</span> </div> ' +
'</div> ' +
'<div class="form-group"> ' +
'<label class="col-md-4 control-label" for="notesbox">Notes:</label> ' +
'<div class="col-md-4"> <div class="textarea"> <label for="notesbox"> ' +
'<textarea name="notesbox" id="notesbox" rows="10" cols="30"></textarea></form></div> ' +
'</label> ' +
'</div>' +
'</div> ' +
'</div> </div>' +
'</form> </div> </div>',
buttons: {
'cancel': {
label: 'Don\'t save',
className: 'btn-danger pull-left'
},
'confirm': {
label: 'Save',
className: 'btn-success pull-right',
}
},callback: function (result) { if (result == true)
{ alert('Success')}
}
}
);
I'd start by using a script template, rather than using string concatenation to build your message - it would make it obvious that your current message has some invalid markup, which isn't doing you any favors. Here's one way of doing that:
<script type="text/template" id="form-template">
<div class="text-center">Save</div>
<form class="form-horizontal">
<div class="form-group">
<label class="col-md-4 control-label" for="Question">Question</label>
<div class="col-md-4">
<input id="name" name="name" type="text" value="Question" class="form-control input-md">
<span class="help-block">You can edit your question before saving</span>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="notesbox">Notes:</label>
<div class="col-md-4">
<div class="textarea">
<textarea class="form-control" name="notesbox" id="notesbox" rows="10" cols="30"></textarea>
</div>
</div>
</div>
</form>
</script>
The type="text/template" attribute on the script tag means that your browser won't treat the contents of the tag as JavaScript to be executed. You can pretty much use just about anything there, but text/template conveys the meaning pretty well, so I stick with that.
With that template tag, you can then get the message for your dialog by doing something like this:
let message = $('#form-template').html();
With that in place, I'd update your Bootbox usage to use the bootbox.dialog helper, rather than try to use bootbox.confirm for something it wasn't intended for. Here's your code, updated:
let message = $('#form-template').html();
let msgbox = bootbox.dialog({
title: "Save Foo",
message: message,
buttons: {
'cancel': {
label: "Don't save",
className: 'btn-danger pull-left'
},
'confirm': {
label: 'Save',
className: 'btn-success pull-right',
callback: function () {
let form = msgbox.find('form');
if(form.valid()){
alert('Valid!');
msgbox.modal('hide');
}
return false;
}
}
}
});
When using the dialog helper, the global callback is no longer executed; rather, each button would have it's own callback, as shown. In this example, I have return false; as the last line, so that the modal will not close automatically. This lets me validate the form (here, I'm assuming jQuery Validate is in use) and whatever else I wanted to do (such as submit the form via AJAX, etc.). Then, we use Bootstrap's modal() function to dismiss our dialog.
Related
I work in a system that allows you to build forms through their GUI. I am interested in using this library to provide suggestions on any fields that are asking for email addresses. I have it working for an individual email field, e.g.:
<div class="form_question form_text form_question_79df87bf-79dc-4d34-a5fb-fb6372e50996" id="form_question_79df87bf-79dc-4d34-a5fb-fb6372e50996" data-id="79df87bf-79dc-4d34-a5fb-fb6372e50996" data-export="email_address_1" data-datatype="email">
<div class="form_responses">
<input type="email" size="48" id="form_79df87bf-79dc-4d34-a5fb-fb6372e50996" name="form_79df87bf-79dc-4d34-a5fb-fb6372e50996">
</div>
</div>
<div class="form_question">
<div class="form_label">
<span id="email_1_suggestion"/>
</div>
</div>
<script>
$('#form_79df87bf-79dc-4d34-a5fb-fb6372e50996').on('blur', function(event) {
$(this).mailcheck({
suggested: function(element, suggestion) {
// callback code
console.log("suggestion ", suggestion.full);
$('#email_1_suggestion').html("Did you mean " + suggestion.full + "?");
},
empty: function(element) {
// callback code
$('#email_1_suggestion').html('No Suggestions :(');
}
});
});
</script>
But for this I need to manually create the span element and enter the input and span IDs in the javascript. I am interested in adjusting this such that I can embed javascript on any of our forms, and it will validate all inputs where type="email", and dynamically create a span element (or any means of displaying the suggestion) with the suggestion for the associated email input, for instance if I have a form asking for three emails:
<div class="form_question form_text form_question_79df87bf-79dc-4d34-a5fb-fb6372e50996" id="form_question_79df87bf-79dc-4d34-a5fb-fb6372e50996" data-id="79df87bf-79dc-4d34-a5fb-fb6372e50996" data-export="email_address_1" data-datatype="email">
<div class="form_responses">
<input type="email" size="48" id="form_79df87bf-79dc-4d34-a5fb-fb6372e50996" name="form_79df87bf-79dc-4d34-a5fb-fb6372e50996">
</div>
</div>
<div class="form_question form_text form_question_125e5ab5-6f73-4522-bc72-5ff30490590e" id="form_question_125e5ab5-6f73-4522-bc72-5ff30490590e" data-id="125e5ab5-6f73-4522-bc72-5ff30490590e" data-export="email_address_2" data-datatype="email">
<div class="form_responses">
<input type="email" size="48" id="form_125e5ab5-6f73-4522-bc72-5ff30490590e" name="form_125e5ab5-6f73-4522-bc72-5ff30490590e">
</div>
</div>
<div class="form_question form_text form_question_2ce48b8a-dd1d-408a-b4b8-a3a175153709" id="form_question_2ce48b8a-dd1d-408a-b4b8-a3a175153709" data-id="2ce48b8a-dd1d-408a-b4b8-a3a175153709" data-export="email_address_3" data-datatype="email">
<div class="form_responses">
<input type="email" size="48" id="form_2ce48b8a-dd1d-408a-b4b8-a3a175153709" name="form_2ce48b8a-dd1d-408a-b4b8-a3a175153709">
</div>
</div>
</div>
How can I utilize this library to provide suggestions for each one?
EDIT:
I have this working but would be grateful for any suggestions on what can be improved.
$("input[type=email]").each(function() {
var email_input = $(this),
email_input_suggestion = email_input.attr('id') + '_suggestion';
$(this).on('blur', function(event) {
$(this).mailcheck({
// domains: domains, // optional
// topLevelDomains: topLevelDomains, // optional
suggested: function(element, suggestion) {
// callback code
if ($('#' + email_input_suggestion).length == 0)
email_input.after('<div id=' + email_input_suggestion + '/>');
$('#' + email_input_suggestion).html('Did you mean ' + suggestion.full + '?');
},
empty: function(element) {
// callback code
$('#' + email_input_suggestion).html('');
}
});
});
});
So I'm developing a website for a medical clinic and they asked me to add a button beneath every doctor to make an appointment.
this is what i have for the doctors section
for (var i = 0; i < 3; i++) {
$('#get_medicos').append(
'<div class="col-md-3 dummy">' +
'<div class="text-box">' +
'<img src="assets/images/corpo-clinico/' + medico[i].ficheiro + '" alt="" class="img-responsive"/>' +
'<div class="clearfix"></div>' +
'<div class="text-box white padding-3">' +
'<h5 class="less-mar1 text-blue">' + medico[i].nome +'</h5>' +
'<p>' + medico[i].especialidade + '</p>' +
'<a id="marcar" type="button" class="btn btn-primary">Marcar consulta</a>' +
'</div>' +
'</div>' +
'</div>'
);
}
The then code for the click function (that doesn't work):
$('#marcar').click(function() {
var offset = $('#marcacao').offset();
$('html, body').animate({
scrollTop: offset.top-100,
scrollLeft: offset.left
}, 1000);
$('#marcacao-consulta').find('#especialidade-marcacao option[id="default"]').text(medico[i].especialidade);
$('#marcacao-consulta').find('#corpo-clinico option[id="default"]').text(medico[i].nome);
console.log('test');
});
This is all inside a $(document).ready(function() {}); and what should do is when i click that button beneath the doctor, should go up to the form and fill the doctor's name and specialty... but it seems it's not working for some reason... this is a copy of other click functions in the code, but they seem to work fine.
HTML form:
<div id="marcacao-consulta" data-target="#marcacao-consulta">
<div class="row">
<div class="col-md-6 col-lg-6 col-sm-12">
<div class="section">
<label class="field select prepend-icon">
<select id="especialidade-marcacao" class="gui-input">
<option id="especialiade-default" value="default">Escolha a especialidade</option>
<?
$query = $dbHandle->prepare("
SELECT `especialidade`
FROM `especialidade`
ORDER BY `especialidade` ASC
");
$query->execute();
if ($query->rowCount() > 0) {
while ($row = $query->fetch(PDO::FETCH_ASSOC)) { ?>
<option value="<?=$row["especialidade"]; ?>"><?=$row["especialidade"]; ?></option>
<? }
} else { ?>
<option value="">Nenhum resultado</option>
<? }
?>
</select>
<span class="field-icon"><i class="fas fa-heartbeat"></i></span>
</label>
</div>
</div>
<div class="col-md-6 col-lg-6 col-sm-12">
<div class="section">
<label class="field select prepend-icon">
<select id="corpo-clinico-marcacao" class="gui-input">
<option id="corpo-clinico-default" value="default">Escolha o médico</option>
<?
$query = $dbHandle->prepare("
SELECT `nome`
FROM `medico`
ORDER BY `nome` ASC
");
$query->execute();
if ($query->rowCount() > 0) {
while ($row = $query->fetch(PDO::FETCH_ASSOC)) { ?>
<option value="<?=$row["nome"]; ?>"><?=$row["nome"]; ?></option>
<? }
} else { ?>
<option value="">Nenhum resultado</option>
<? }
?>
</select>
<span class="field-icon"><i class="fas fa-user-md"></i></span>
</label>
</div>
</div>
<div class="col-md-12 col-lg-12 col-sm-12">
<div class="section">
<label class="field prepend-icon">
<input id="nome" class="gui-input" type="text" placeholder="Nome Completo">
<span class="field-icon"><i class="fas fa-user"></i></span>
</label>
</div>
<div class="section">
<label class="field prepend-icon">
<input id="email" class="gui-input" type="text" placeholder="Endereço de correio eletrónico">
<span class="field-icon"><i class="fas fa-envelope"></i></span>
</label>
</div>
<div class="section">
<label class="field prepend-icon">
<input id="telefone" class="gui-input" type="text" placeholder="Telefone/Télemovel">
<span class="field-icon"><i class="fas fa-phone-square"></i></span>
</label>
</div>
<div class="section">
<label class="field prepend-icon">
<input id="tipo" class="gui-input" type="text" value="consulta" disabled>
</label>
</div>
</div>
</div>
</div>
You have to add the element and register the event for the element. Here is the fiddle which works for you
https://jsfiddle.net/0q3kpyfv/
Your sample HTML
<div id="get_medicos">
</div>
Sample jquery code
Notice I have added the data-val attribute to the added anchor tag which will help you to get the information and perform the logic based on which button is clicked. you can pass dynamic data to data-val attribute and use it in click event.
$(document).ready(function() {
var sampleString = "";
var medico = [{'especialidade':'speciality 0','nome':'Doctor 0'},{'especialidade':'speciality 1','nome':'Doctor 1'},{'especialidade':'speciality 2','nome':'Doctor 2'}]
for (var i = 0; i < 3; i++) {
var doctorData = medico[i];
$('#get_medicos').append(
'<div class="col-md-3 dummy">' +
'<div class="text-box">' +
'<img src="assets/images/corpo-clinico/' + medico[i].especialidade + '" alt="" class="img-responsive"/>' +
'<div class="clearfix"></div>' +
'<div class="text-box white padding-3">' +
'<h5 class="less-mar1 text-blue">' + medico[i].nome +'</h5>' +
'<p>' + medico[i].especialidade + '</p>' +
'<a id="marcar" data-doctor-especialiadade="'+medico[i].especialidade+'" data-doctor-nome="'+medico[i].nome+'" type="button" class="btn btn-primary">Marcar consulta'+i+'</a>' +
'</div>' +
'</div>' +
'</div>'
);
};
$('#get_medicos').on('click','a',function(event){
var elementClicked = event.target;
var doctorEspecialiadade = $(elementClicked).data('doctor-especialiadade');
var doctorName = $(elementClicked).data('doctor-nome');
$('#marcacao-consulta').find('#especialidade-marcacao option[id="default"]').text(doctorEspecialiadade);
$('#marcacao-consulta').find('#corpo-clinico option[id="default"]').text(doctorName);
})
});
if you create the button after your event, you could have problem so, use the delegate version of click:
$('div').on('click', 'a', (function()....
and better put an id on the ancestor div:
'<div class="text-box white padding-3" id="mydiv"'
:
$('#mydiv').on('click', 'a', (function()....
another thing, with the loop you will have same id more time in your html??its no good.
so you'll have to rebuild your program logic...and bind the event with the right button (use a common class) it will be better than an id
If you bind the event to the parent element, and filter by the children, you can listen to any new elements that are added, doesn't matter how many.
<div class="container"></div>
<button class="js-add-new">Add new</button>
const $addNew = $('.js-add-new')
const $container = $('.container')
let count = 0
$addNew.on("click", () => {
count += 1
$container.append(`
<div>
<button>log me ${count}</button>
</div>
`)
})
$container.on("click", "button", (event) => {
console.log(event.currentTarget)
})
A working example: https://codepen.io/alexmccabe/pen/jOrXZxj?editors=1111
The button click is working. Here is a fiddle showing it does:
https://jsfiddle.net/bradberkobien/qL4m10y6/3/
There must be an issue with the code that comes before the console.log("test") line within the click. I would use the debugger to help you with that.
I've been coding for years, but only in recent months I started looking into JavaScript/jQuery/Ajax. I have searched for days, but none of the answers I see match what I'm trying to do (as far as I can see).
I have a select that gets a list of agendas from the controller. After an agenda is selected, an Ajax call is triggered to get related subjects from the database, and add it as radio inputs to a predefined div. There is already a radio button group for "time assignment per group", where, depending on your selected option, the right set of input fields is displayed.
This works fine for adding the info, but now I want to edit existing records on this same page. So now I want to select an agenda, get the subjects, have the system check if there are already time assignments for the subject I select. If there are, display the correct fields with the data preloaded. If not, treat it like an Add form.
My select works as expected, the Ajax call also creates the needed radio buttons, but how do I access those newly created radio buttons, to start a new Ajax call on that element, to check if there are already assignments?
SELECT
<form accept-charset="UTF-8" class="form-horizontal">
{{ csrf_field() }}
<div class="form-group">
<label for="agenda" class="col-sm-3 control-label">Agenda</label>
<div class="col-sm-6">
<select class="form-control" id="agenda" name="agenda">
<option value="">Selecteer een agenda</option>
#foreach($agendas as $key => $value)
<option value="{{ $key }}">{{ $value }}</option>
#endforeach
</select>
</div>
</div>
</form>
<form method="POST" action="{{ action('TimeController#store') }}" accept-charset="UTF-8" class="form-horizontal">
{{ csrf_field() }}
<div class="form-group"><div id="insertSubjects"></div></div>
<div class="form-group">
<label for="all_type" class="col-sm-3 control-label">Allocatie type</label>
<div class="col-sm-6">
<input type="radio" name="type" id="user" value="1"> User<br>
<input type="radio" name="type" id="fraction" value="2"> Fractie<br>
<input type="radio" name="type" id="oppcoa" value="3"> Oppositie/Coalitie
</div>
</div>
<div id="insertFields"></div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-6">
<input class="btn btn-default" type="submit" value="Voeg toe">
</div>
</div>
</form>
JAVASCRIPT
<script type="text/javascript">
$(document).ready(function() {
$('#agenda').on('change', function() {
var agenda = $('#agenda option:selected').attr('value');
var my_url = window.location.pathname + '/agenda/' + agenda;
$.ajax({
type: "post",
url: my_url,
headers: {'X-CSRF-TOKEN': $('input[name=_token]').val()},
dataType: 'json',
context: this,
success: function (data) {
var fields = '<label for="subject" class="col-sm-3 control-label">Selecteer onderwerp</label>' +
'<div class="col-sm-6">';
jQuery.each(data, function (k, v) {
fields += '<input type="radio" name="subject" value="' + v.id + '" class="subject_radio"> ' + v.subject + '<br>';
});
fields += '</div>';
$('#insertSubjects').html(fields);
$('input:radio[name=subject]:first').attr('checked', true);
}
})
});
$('input[type=radio][name=type]').change(function() {
var fields;
if (this.id == 'user') {
fields = '<div class="form-group"><label for="per_user" class="col-sm-3 control-label">Per lid</label><div class="col-sm-6"><input type="text" name="per_user" id="per_user" /></div></div>';
}
else if (this.id == 'fraction') {
fields = '<div class="form-group"><label for="NDP" class="col-sm-3 control-label">NDP</label><div class="col-sm-6"><input type="text" name="NDP" id="NDP" /></div></div>' +
'<div class="form-group"><label for="VHP" class="col-sm-3 control-label">VHP</label><div class="col-sm-6"><input type="text" name="VHP" id="VHP" /></div></div>' +
'<div class="form-group"><label for="ABOP" class="col-sm-3 control-label">ABOP</label><div class="col-sm-6"><input type="text" name="ABOP" id="ABOP" /></div></div>' +
'<div class="form-group"><label for="PL" class="col-sm-3 control-label">PL</label><div class="col-sm-6"><input type="text" name="PL" id="PL" /></div></div>' +
'<div class="form-group"><label for="BEP" class="col-sm-3 control-label">BEP</label><div class="col-sm-6"><input type="text" name="BEP" id="BEP" /></div></div>' +
'<div class="form-group"><label for="NPS" class="col-sm-3 control-label">NPS</label><div class="col-sm-6"><input type="text" name="NPS" id="NPS" /></div></div>' +
'<div class="form-group"><label for="PALU" class="col-sm-3 control-label">PALU</label><div class="col-sm-6"><input type="text" name="PALU" id="PALU" /></div></div>' +
'<div class="form-group"><label for="DOE" class="col-sm-3 control-label">DOE</label><div class="col-sm-6"><input type="text" name="DOE" id="DOE" /></div></div>' +
'<div class="form-group"><label for="Onbekend" class="col-sm-3 control-label">Onbekend</label><div class="col-sm-6"><input type="text" name="Onbekend" id="Onbekend" /></div></div>';
}
else if (this.id == 'oppcoa') {
fields = '<div class="form-group"><label for="Coalitie" class="col-sm-3 control-label">Coalitie</label><div class="col-sm-6"><input type="text" name="Coalitie" id="Coalitie" /></div></div>' +
'<div class="form-group"><label for="Oppositie" class="col-sm-3 control-label">Oppositie</label><div class="col-sm-6"><input type="text" name="Oppositie" id="Oppositie" /></div></div>' +
'<div class="form-group"><label for="Neutraal" class="col-sm-3 control-label">Neutraal</label><div class="col-sm-6"><input type="text" name="Neutraal" id="Neutraal" /></div></div>';
}
$('#insertFields').html(fields);
});
});
</script>
All the Ajax requests just return JSON encoded data from the database, but if you guys need to see those calls too, let me know. Please guide me in the right direction...
You can create array which will hold the newly created radios buttons.
var newRdoBtnsArr = []; // Array to hold the newly created new radio buttons
$.ajax({
.
.
.
.
success: function (data) {
var newRdoBtn = '<input type="radio" name="subject" value="' + v.id + '" class="subject_radio"> ';
newRdoBtnsArr.push( $( newRdoBtn ) ); // Push the radio button as jQuery object
fields += newRdoBtn + v.subject + '<br>';
.
.
.
.
});
Update after the comment:
I guess you need to execute a AJAX call when there is a change in newly created radio buttons. In that case you can add below lines and try. Like you did for $('input[type=radio][name=type]').change(function() {
$( 'body' ).on( 'change', 'input:radio[name=subject]', function() {
console.log("It works");
} );
I've been stuck on this problem without a clear way around it for a while now. https://jsfiddle.net/brendanjackson/4ajs7czo/3/
Here's the scenario. I have two functions that send one set of data to different areas of my page. So if you enter some text in the main field, hit submit, it sends that text to 'set1' and creates a button and select menu.
<body>
<div class="container-fluid">
<div class="start">
<form class="form-inline">
<h1><strong>Start</strong></h1>
<div class="row">
<div class="col-xs-4">
Task:<input type="text" class= "task form-control" id="input_text" >
</div>
</div>
<!--***********************************************************************************************************-->
<div class="row">
<div class="col-md-4">
Send to:
<select class="set1_menu">
<option value="set1table0">set1table0</option>
</select>
</div>
<div class="col-md-4">
<input type="button" id='submit_button' class="btn btn-primary" value="Submit!" />
</div>
</div>
</form>
</div>
<!--***********************************************************************************************************-->
<div>
<h1 class="label label-default">Set1</h1>
<div class="set1 row">
<div class="set1_table0 column ">
<h3>set1table0</h3>
<ul class="set1_text0"></ul>
</div>
</div>
<!--**********************************************************************************************************-->
<div>
<h1 class="label label-default set2">Set2</h1>
</div>
<!--*********************************************************************************************************-->
<div>
<div class="set2_table0 column">
<h3>set2table0</h3>
<ul class="set2_text0"></ul>
</div>
</div>
</div>
$('#submit_button').on("click",function() {
/*==========================================
variabes
===========================================*/
task = $(".task").val();
set1_menu = $(".set1_menu option:selected");
set1_index = set1_menu.index() //switch arg
set2_menu = '<select class="set2_menu"> <option value="set2_table0">set2table0</option> </select>';
set2_button = '<input type="button" class="set2_button" data-set1_data="'+set1_index+'" value="set2_button" />'
$('.set1_table0').append("<li>" + task + " " + set2_menu + " " + set2_button + "</li>" );
})
$("div.set1.row").on("click", "input.set2_button", function(){
/*==========================================
variabes
===========================================*/
var set2_index = $(this).closest('li').find('select.set2_menu option:selected').index();
var set1_data = $(this).data('set1_data');
var set2_data = $(this).data('set2_data');
/*=========================================
TEST
=========================================*/
console.log( "IT WORKS" + " " + set2_index );
switch(set2_index){
case 0:
$('.set2_table0').append("<li>" + task + " " + " (from Table " +set1_data+ " )" + " " /*+ datetimepicker + " "*/ + "</li>" );
break;
}
});
Problem:
If the user follows the data sent to set1 and sends it to set2 all is well and the jedi win!
However, if the user decides to go back to the start, enter new information, and send it to set1, the previous variable has of course been overwritten and can no longer be sent to set2. It will now send whatever the newest variable's information is.
Something was suggested to me like adding var i=0++, task and then adding i++ on my 1st function so it gives each variable its own easy to find # like task0, task1, task(n) as well as turning it into an array. Both of these solutions I'm just not understanding how to implement, maybe for the lack of how to express my problem to research it?
Question
How do I cleanly save each set of data that is submitted so that it can be sent from set1 to set2 whenever the user decides they're ready.
I am using bootbox to make pop-up windows with forms and I have to validate them and throw error to user if something is wrong with the form fields.
But I cannot prevent bootbox window from closing after user clicks 'Send' button. I need to show error notifications to user, so errors could be corrected and the form be sent again.
return false works ok, but after it I cannot find method, to restore usual method of bootbox to close the windows.
Does somebody faced the same problem and how you get rid of this situation?
As asked, fsFiddle:
<button id="test">Bootbox</button>
Code:
$(document).ready(function() {
$("#test").on('click', function() {
bootbox.dialog({
title: "This is a form in a modal.",
message: '<div class="row"> ' +
'<div class="col-md-12"> ' +
'<form class="form-horizontal"> ' +
'<div class="form-group"> ' +
'<label class="col-md-4 control-label" for="name">Name</label> ' +
'<div class="col-md-4"> ' +
'<input id="name" name="name" type="text" placeholder="Your name" class="form-control input-md"> ' +
'<span class="help-block">Here goes your name</span> </div> ' +
'</div> ' +
'<div class="form-group"> ' +
'<label class="col-md-4 control-label" for="awesomeness">How awesome is this?</label> ' +
'<div class="col-md-4"> <div class="radio"> <label for="awesomeness-0"> ' +
'<input type="radio" name="awesomeness" id="awesomeness-0" value="Really awesome" checked="checked"> ' +
'Really awesome </label> ' +
'</div><div class="radio"> <label for="awesomeness-1"> ' +
'<input type="radio" name="awesomeness" id="awesomeness-1" value="Super awesome"> Super awesome </label> ' +
'</div> ' +
'</div> </div>' +
'</form> </div> </div>',
buttons: {
success: {
label: "Save",
className: "btn-success",
callback: function () {
var name = $('#name').val();
var answer = $("input[name='awesomeness']:checked").val()
console.log(name + " " + answer);
}
}
}
});
});
});
I am not 100% sure about what it is that you want. I understand it as: "Keep the modal open until the form is valid".
If this is what you need, you could proceed as such:
callback: function () {
var name = $('#name').val();
var answer = $("input[name='awesomeness']:checked").val()
console.log(name + " " + answer);
// proceed to your validation, if your form is not valid
// the validation should return false
var formIsValid = doFormValidation();
if(!formIsValid) {
// show error messages to the user here
showFormErrors();
// prevent the modal from closing
return false;
}
}