- You are here:
- Home »
- Web Development »
- Add remove SAP HTML buttons or links using javascript
Add remove SAP HTML buttons or links using javascript
Advertisements
Adding and removing HTML elements such as buttons and A href links dynamically is very simple using javascript. If you are bored of reading already feel free to go straight to the end of this article where there is a
Advertisements
Below is the individual JavScript code for implementing the various methods of doing this either by showing/hiding and element on screen or by removing it altogether and then re-adding it. Both have there pros and cons so just need to decide which fits in with your requirements.
Full code listing
Alternatively here a basic code snippet which you can just copy and paste into your your SAP BSP or a HTML file and test this out for yourself.
Advertisements
<html>
Advertisements
<head>
<title>Demonstrate how to add and delete buttons and links</title>
Advertisements
<script type=”text/javascript”>
function delbutton()
{
var elem = document.getElementById(‘report1’);
elem.parentNode.removeChild(elem);
}
function addbutton()
{
var addbut = document.createElement(‘input’);
addbut.type = “submit”;
addbut.value = “Test Button”;
addbut.name = “test1”;
addbut.id = “report1”;
addbut.setAttribute(‘class’, ‘test’);
document.getElementById(‘button1’).appendChild(addbut);
}
function dellink()
{
var elem = document.getElementById(‘report2’);
elem.parentNode.removeChild(elem);
}
function addlink()
{
var addLink = document.createElement(‘a’);
var linkText = document.createTextNode(“Test link”);
addLink.appendChild(linkText);
addLink.title = “title”;
addLink.href = “#”;
addLink.id = “report2″;
addLink.setAttribute(‘class’, ‘test’);
document.getElementById(‘link1’).appendChild(addLink);
}
function hideelement() {
document.getElementById(‘report1’).style.visibility = ‘hidden’;
}
function showelement() {
document.getElementById(‘report1’).style.visibility = ‘visible’;
}
</script>
</head>
<body>
<form id=”sapbspform” name=”sapbspform” method=”post” action=””>
<p>
<ul>
<li id=”button1″>
some text
<input id=”report1″ type=”submit” name=”testbut1″ value=”Test Button” >
some more text
</li>
<li id=”link1″>
<a href=”#” id=”report2″ value=”1″ >Test link</a>
</li>
</ul>
<br><br>
<a href=”#” onclick=”delbutton();” value=”Del” id=”delbutton” >del button</a>
<br><a href=”#” onclick=”addbutton();” value=”Add” id=”addbutton” >Add button</a>
<br><br><a href=”#” onclick=”dellink();” value=”Del” id=”dellink” >del link</a>
<br><a href=”#” onclick=”addlink();” value=”Add” id=”addlink” >Add link</a>
<br><br><a href=”#” onclick=”hideelement();” value=”Del”>Hide button</a>
<br><a href=”#” onclick=”showelement();” value=”Add”>Show button</a>
</p>
</form>
</body>
</html>
Executing the HTML code
When you execute the report you will notice the following behaviour:
- Clicking the Del button
Notice that when the button is deleted the text either side closes together and uses the space where the button used to be. Also note this means that once it has been removed you can no longer reference the element within your JavaScript.
- Clicking the Hide button
When the button is hidden its still takes up the same space but
Advertisements
