How to change button appearance in a jquery call

Question

When I click on a link in my jsp

<a id="ajout_lien" href="javascript:submitFormAjout()" class="under">go </a>

I call a javascript function

function submitFormAjout() {
document.forms['constitutionForm'].submit();
}

Then there is the jquery call to prevent from a double submit :

$("form").submit(function () {
    if ($(this).valid()) {
        $(this).submit(function () {
            return false;
        });
        return true;
    }
    else {
        return false;
    }
});

How can I change the appearance of my link while the submit is done (the real one, in the Jquery's call)? By instance change the color and label of my tag ( let's say from "go" to "waiting"? I want it to be as generic as possible : if, in another jsp of my application, the submit is made on a button, not a link, I an use 3 parameters : newClass (css) , idElement (of the button or the link) and label if it's a link.

Answer 1

Try the below code

function submitFormAjout() {
    document.getElementById("ajout_lien").className ="over";
    document.forms['constitutionForm'].submit();
}

jQuery .one() ensures submit event is triggered only once.

$("form").one("submit", function () {
    if ($(this).valid()) {
        $(this).submit(function () {
            return false;
        });
        return true;
    }
    else {
        return false;
    }
});

Answer 2

JQuery:

function submitFormAjout() { 
    $("#"+ (this).attr("id")).addClass("over");
    $('form[name="constitutionForm"]').submit();
}

HTML:

<a id="ajout_lien" href="javascript:submitFormAjout()" class="under">text </a>

If you want className to be dynamic, then you can pass it as function parameter and use that value in the method.