Question

Based on the jquery ui button documentation, I tried the following:

<jquery>$("#test").button({ icons: { primary:'ui-icon-gear' } });</jquery>
<input id="test" type="submit" value="test"></input>

However the icon doesn’t appear on the button. If I change the <input> to a <span>, it works; but I need the icons on a form submit button. Placing the <span> around the button doesn’t help either (then I have a button inside a button).

I also tried the solution described in this stackoverflow question, but the .prepend span doesn’t have an effect on my page. Any ideas?

Answer 1

you can bind a click event to your span than it’s like a button … for example:

<form id="myForm" ...>
...
    <span onclick="document.myform.submit()" class="jqueryUI" id="myButton">Butotnvalue</span>
...
</form>

better way is to bind it in the jQuery loader function, for sure 😉

$('#myButton').bind('click', function(){
    $('#myForm').submit();
});