0

I am using the following to create buttons at runtime:

var dynButton = $('<input/>').attr({ type: 'button', id:'idDynBtn', class:'clsDynBtn', name:'DynBtn', value:'Tool' });

How to place an icon or image on the button created as above?

shaan
  • 351
  • 2
  • 15

3 Answers3

0

<input type="button"> can't be an image. <input type="image" src="..."> can show an image, and <button><img src="..."></button> can show an image. See Input Type image submit form value?

kmoser
  • 8,780
  • 3
  • 24
  • 40
0

type=submit is a button.

here is the example https://jsfiddle.net/t7gvd10c/

 var dynButton = $('<input/>').attr({ type: 'submit', id:'idDynBtn', class:'clsDynBtn', name:'DynBtn', value:'Tool' });
Moti Salamon
  • 152
  • 8
  • The button in the instant case is being used for purpose other than form **submit**. So can't use `type: 'submit'` here. – shaan Oct 12 '20 at 02:02
  • of course you can, you need to handle click like this: https://jsfiddle.net/0revhg25/ – Moti Salamon Oct 12 '20 at 02:15
  • This is a round about way of preventing form submit. Should be used where absolutely required. Check the question again. How to place the icon? – shaan Oct 12 '20 at 02:20
  • im a little bit confused, why are you using input? what is the purpose? i thought this is an element inside a form – Moti Salamon Oct 12 '20 at 02:24
0

I did it with font awesome and jquery same as follow:

function addButton(txt,icon){
  let btn = document.createElement("button");
  $(btn).html(`<i class="${icon}"></i> ${txt}`);
  $(btn).appendTo($("#btnContainer"));
}
addButton("home","fa fa-home");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


<div id="btnContainer">

</div>

I hope it useful for you.

Mehrzad Tejareh
  • 635
  • 5
  • 21