Add remove SAP HTML buttons or links using javascript

Leave a Comment / Web Development / By

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

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.

adddel1

<html>

<head>
<title>Demonstrate how to add and delete buttons and links</title>

<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.

del

  • Clicking the Hide button
    When the button is hidden its still takes up the same space but

hide

 

 

0 thoughts on “Add remove SAP HTML buttons or links using javascript”

  1. BryanMus

    Hello!

    Do you want to become the best SEO specialist and link builder or do you want to outpace your competitors?

    Premium base for XRumer
    $119/one-time
    Get access to our premium database, which is updated monthly! The database contains only those resources from which you will receive active links – from profiles and postings, as well as a huge collection of contact forms. Free database updates. There is also the possibility of a one-time purchase, without updating the databases, for $38.

    Fresh base for XRumer
    $94/one-time
    Get access to our fresh database, updated monthly! The database includes active links from forums, guest books, blogs, etc., as well as profiles and activations. Free database updates. There is also the possibility of a one-time purchase, without updating the databases, for $25.

    GSA Search Engine Ranker fresh verified link list
    $119/one-time
    Get access to our fresh database, updated monthly! The fresh database includes verified and identified links, divided by engine. Free database updates. There is also the possibility of a one-time purchase, without updating the databases, for $38.

    GSA Search Engine Ranker activation key
    $65
    With GSA Search Engine Ranker, you’ll never have to worry about backlinks again. The software creates backlinks for you 24 hours a day, 7 days a week. By purchasing GSA Search Engine Ranker from us, you get a quality product at a competitive price, saving your resources.

    To contact us write to Telegram: https://t.me/DropDeadStudio

    Reply

    Your comment is awaiting moderation.

Leave a Comment

Your email address will not be published. Required fields are marked *