Adding jquery ui icon to submit button

Question

I have the following code for the submit button on my page: html markup:

<td align="Right"><input type="submit" value="Add Driver" ></td> 

and jquery:

 $( "input[type=submit]" ).button().click(function( event ) { event.preventDefault(); }); 

How to add the ui icon to the above, in particular, ui-icon-circle-plus

Answer 1

You can change your HTML as follows:

 <button type="submit"> Add Driver </button> 

And then update your script as follows:

 $('button[type=submit]').button({icons: {primary: 'ui-icon-circle-plus'}}).click(function (event) { event.preventDefault(); }); 

Demo: http://jsfiddle.net/mh5Pu/

Answer 2

it should work

 $( "input[type=submit]" ).button({icons: {primary: "ui-icon-circle-plus"}}) .click(function( event ) { event.preventDefault(); }); 

or you will install it later:

 $( "input[type=submit]" ).button( "option", "icons", { primary: "ui-icon-circle-plus", secondary: "<your_second_icon>" } ); 

Here is a working example.

Answer 3

Check out the examples at http://jqueryui.com/button/#icons (notably the badges).

Instead of using send input, try using the button.

Here, the version of the button with the ui-icon-circle-plus icon only has been changed:

 <button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" role="button" aria-disabled="false" title="Button with icon only"> <span class="ui-button-icon-primary ui-icon ui-icon-circle-plus"></span> <span class="ui-button-text">Button with icon only</span> </button>