Bootstrap question

renisenbb
renisenbb used Ask the Experts™
on
I have a span element that showed up as a button.
<span class="button" style="button.gif" href="javascript:TestSubmit('abc')" > MyButton </span>
How do i convert it to Bootstrap?
I've tried
<button class="btn btnPrimary" href="javascript:TestSubmit('abc')" >MyButton</button>
but the javascript doesn't get triggered
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Distinguished Expert 2017

Commented:
Comments inside the code:
HTML:
<!--I removed the href attr and I set an id-->
<span class="button" id="myButton" style="button.gif"  > MyButton </span>

Open in new window


JQuerycode:
//First I set a variable to span element
var spanElem=document.getElementById('myButton');
//Then I create a button element and define it to a var
var buttonElem=document.createElement('button');
//I set the innerHTML value and the bootstrap class
buttonElem.innerHTML='MyButton';
buttonElem.setAttribute('class', 'btn btnPrimary');
//I use the replaceWith() function to replace the spanElem
//element with the button element.Finally I set a click event
//to span that when I click on it to replace the span element
spanElem.addEventListener('click',function(){
spanElem.replaceWith(buttonElem);
});

Open in new window


PS
I used JQuery replaceWith() function that is more easy and handful .See the replaceWith() documentation
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
This is not valid - not sure how it was working on your page but the style and href are not valid
<span class="button" style="button.gif" href="javascript:TestSubmit('abc')" > MyButton </span>

Open in new window


How you want this button to work in Bootstrap depends on the use case. Here are the options

1. You don't have to use a <button> element - you can use any element
<a class="btn btn-primary" ...>Click Me</a>
<input type="button" class="btn btn-primary" value="Click Me" />
<button class="btn btn-primary">Click Me</button>
<span class="btn btn-primary">Click Me</span>

Open in new window

2. You can use the onclick attribute to assign a click handler or use JavaScript or jQuery
onclick
<a class="btn btn-primary" onclick="TestSubmit(this.textContent)">Click Me &lt;a&gt;</a>
<input type="button" class="btn btn-primary" value="Click Me &lt;input&gt;"  onclick="TestSubmit(this.value)"/>
<button class="btn btn-primary" onclick="TestSubmit(this.textContent)">Click Me &lt;button&gt;</button>
<span class="btn btn-primary" onclick="TestSubmit(this.textContent)">Click Me &lt;span&gt;</span>

<script>
function TestSubmit(val)
{
  alert('You clicked ' + val);
}
</script>

Open in new window

JavaScript
<div class="javascript-buttons">
<a class="btn btn-primary">Click Me &lt;a&gt;</a>
<input type="button" class="btn btn-primary" value="Click Me &lt;input&gt;" />
<button class="btn btn-primary">Click Me &lt;button&gt;</button>
<span class="btn btn-primary">Click Me &lt;span&gt;</span>
</div>

<script>
var btns = document.querySelectorAll('.javascript-buttons *');
for(var i = 0; i < btns.length; i++) {
  btns[i].addEventListener('click', function() {
    var text = this.textContent || this.value;
    alert('JavaScript: You clicked ' + text);
  });
}
</script>

Open in new window


jQuery
<div class="jquery-buttons">
<a class="btn btn-primary">Click Me &lt;a&gt;</a>
<input type="button" class="btn btn-primary" value="Click Me &lt;input&gt;" />
<button class="btn btn-primary">Click Me &lt;button&gt;</button>
<span class="btn btn-primary">Click Me &lt;span&gt;</span>
</div>

<script>
$(function() {
  $('.jquery-buttons *').click(function() {
    var text = $(this).text() || $(this).val();
    alert('jQuery: You clicked ' + text);
  });
});
</script>

Open in new window


Working sample here

Author

Commented:
Thank you!
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
You are welcome.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial