Question

I have a form submit link labeled “OK”, and I want to have a spinner to indicate that something is happening when it’s clicked. I tried adding an image to the clicked span before submitting the form, but it doesn’t appear:

function submitMyForm() {
    $(this).html($(this).html() + "&nbsp;&nbsp;<img src='/img/spinner.gif'>");
    $("#my_form").submit();
}

with HTML:

<em class="ok_btn">
    <a href="javascript:void(0);" onclick="submitMyForm();">OK</a>
</em>

It seems like the form submit happens before the page is re-painted. Is there way to get the page to re-paint, and then submit the form?

Answer 1

$(this) won’t refer to anything because nothing has been passed. I think you need to pass the element to the function with:

<a href="javascript:void(0);" onclick="submitMyForm(this);">OK</a>

then the js would become:

function submitMyForm(el) {
    $(el).html($(el).html() + "  ");