Add a button next to submit
There are occasions where users wish to add a button to the bottom of a request next to the "Submit" button. This is usually a Cancel button but can be any button.
If the button were any place else in the Request the solution would be as simple as just adding a text question with html for a button. Since the "Submit" button is outside the div which contains the questions, the solution requires a different solution.
Resolution
To add the cancel button, add the JavaScript code below to the custom header content or a custom JavaScript file.
//Adds a cancel button to page (will be dependent upon styling)
//add this line to DisplayPage to call function
KD.utils.Action.addListener(window, "load", addButton);
//function to add cancel button to page
function addButton() {
//Give the Button a label
var buttonLabel = "Cancel";
//Give the Button Layer Element an ID
var buttonID = "BUTTON_Cancel";
//Create the Button Layer element
var ni = document.getElementById('pageID');
ni = 'PAGE_' + ni.value;
var buttonLayer = document.createElement("div");
buttonLayer.id = buttonID;
buttonLayer.className ="templateButtonLayer submitButton";
document.getElementById(ni).appendChild(buttonLayer);
//Create the Button element
var button = document.createElement("input");
button.className ="templateButton";
button.type = "button";
button.value = buttonLabel;
button.name = buttonLabel;
button.onclick= show_confirm; //Call the "show_confirm" function which is defined below.
//Append both elements to the page
document.getElementById(ni).appendChild(buttonLayer);
document.getElementById(buttonID).appendChild(button);
}
//Modify this function to contain the code which will execute on press of the button.
function show_confirm(){
alert('The button was pressed');
}
Without proper styling the buttons will not appear next to each other but it will appear below the submit button. The CSS below will place the new button to the right of the submit button. Please keep in mind that any other styles applied to the Service Item could interfere with CSS below and to not appear the right of the submit button.
<style>
.templateButton{
float:left;
}
</style>