Using multiple buttons
← Examples
A form might have multiple buttons. Clicking any of them will validate the form, but each button might do additional task.
For example, a form of writing article have three submit buttons:
- A Save button saves the article and keeps the current publishing status
- A Save and publish button saves and publishes the article
- A Save as draft button saves the article as draft
These buttons will execute form validation when being clicked.
In order to archive this case, first, we need to trigger the success.form.fv event to perform custom handler when the form is valid.
Next, use the getSubmitButton() method to determine which button is clicked.
<script src="//oss.maxcdn.com/bootbox/4.2.0/bootbox.min.js"></script>
<style type="text/css">
/* Adjust feedback icon position */
#articleForm .form-control-feedback {
right: 15px;
}
#articleForm .selectContainer .form-control-feedback {
right: 25px;
}
</style>
<form id="articleForm" method="post">
<div class="form-group">
<div class="row">
<div class="col-xs-8">
<label class="control-label">Title</label>
<input type="text" class="form-control" name="title" />
</div>
<div class="col-xs-4 selectContainer">
<label class="control-label">Category</label>
<select class="form-control" name="category">
<option value="">Choose a category</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="javascript">Javascript</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label">Summary</label>
<textarea class="form-control" name="summary" rows="5"></textarea>
</div>
<div class="form-group">
<label class="control-label">Content</label>
<textarea class="form-control" name="content" rows="10"></textarea>
</div>
<!-- The default publishing status -->
<input type="hidden" name="status" value="unpublished" />
<div class="form-group">
<button type="submit" class="btn btn-primary" id="saveButton">Save</button>
<button type="submit" class="btn btn-default" id="publishButton">Save and publish</button>
<button type="submit" class="btn btn-default" id="draftButton">Save as draft</button>
</div>
</form>
<script>
$(document).ready(function() {
$('#articleForm')
.formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
title: {
// The title field is placed inside .col-xs-8 element
row: '.col-xs-8',
validators: {
notEmpty: {
message: 'The title is required'
},
stringLength: {
min: 10,
max: 80,
message: 'The username must be more than 10 and less than 80 characters long'
}
}
},
category: {
// The category field is placed inside .col-xs-4 element
row: '.col-xs-4',
validators: {
notEmpty: {
message: 'The category is required'
}
}
},
summary: {
validators: {
notEmpty: {
message: 'The summary is required'
},
stringLength: {
max: 500,
message: 'The summary must be less than 500 characters long'
}
}
},
content: {
validators: {
notEmpty: {
message: 'The content is required'
}
}
}
}
})
.on('success.form.fv', function(e) {
var $form = $(e.target), // Form instance
// Get the clicked button
$button = $form.data('formValidation').getSubmitButton(),
// You might need to update the "status" field before submitting the form
$statusField = $form.find('[name="status"]');
// To demonstrate which button is clicked,
// I use Bootbox (http://bootboxjs.com/) to popup a simple message
// You might don't need to use it in real application
switch ($button.attr('id')) {
case 'publishButton':
$statusField.val('publish');
bootbox.alert('The article will be published');
break;
case 'draftButton':
$statusField.val('draft');
bootbox.alert('The article will be saved as a draft');
break;
case 'saveButton':
default:
$statusField.val('unpublished');
bootbox.alert('The article will be saved');
break;
}
});
});
</script>