CODEWITHSUNDEEP
javascriptjqueryasp.net-mvc
hsim
hsim

Reputation: 2080

Call a javascript loading function and a controller action

I am trying to display a "loading" page when doing an action.

In a view I have the following form:

<div>
    <label class="bold center">
        Payment options
    </label>
    <div class="center">
        <div class="float-left">
            <label class="center bold">PayPal</label>
            <form id="payPal" action="@Url.Action("PaypalMethod")">
                <input type="image" name="submit"
                       src="~/Images/Functional/Icons/PayPal Pay.gif"
                       alt="PayPal — The safer, easier way to pay online." onclick="needToConfirm = false" />
            </form>
        </div>
        <div class="float-left">
            <label class="center bold">Credit Cards</label>
            <form id="credit" action="@Url.Action("CreditCardMethod")">
                <input type="image" name="submit"
                       src="~/Images/Functional/Icons/Credit cards.png"
                       alt="CreditCards" onclick="needToConfirm = false"/>
            </form>
        </div>
    </div>
</div>

And I have those javascript method available:

var spinnerVisible = false;

function ShowProgress() {
    if (!spinnerVisible) {
        $('div#spinner').fadeIn("fast");
        spinnerVisible = true;
    }
}
function HideProgress() {
    if (spinnerVisible) {
        var spinner = $('div#spinner');
        spinner.stop();
        spinner.fadeOut('fast');
        spinnerVisible = false;
    }
}

So when I click on the first form, for example, I would like to call the ShowProgress() method first, then the action, and lastly the HideProgress() after the results are in or simply load the next view.

How could I do that?

Upvotes: 0

Views: 102

Answers (1)

Romain B.
Romain B.

Reputation: 266

You can use the onsubmit attribut of form element.

<form onsubmit="ShowProgress()">

Upvotes: 2

Related Questions