Wat is die beste benadering vir (kliënt-kant) die aanskakel van'n stuur-knoppie?

StackOverflow https://stackoverflow.com/questions/46079

Vra

Besonderhede:

  • Net skakel na die gebruiker druk die stuur knoppie, maar voor die plasing terug na die bediener
  • ASP.NET Webforms (.NETTO 1.1)
  • Verkies jQuery (indien enige biblioteek op alle)
  • Moet in staat gestel word as vorm herlaadt (d. w. skrediet kaart nie)

Dit is nie'n noodsaaklikheid dat ek dit doen, maar as daar is'n eenvoudige manier om dit te doen sonder om te verander is te veel, ek sal dit doen.(dws.as daar nie'n eenvoudige oplossing nie, ek sal waarskynlik nie doen dit, so moenie bekommerd wees oor te grawe diep)

Was dit nuttig?

Oplossing

Vir al dien knoppies, via JQuery, dit wil wees:

$('input[type=submit]').click(function() { this.disabled = true; });

Of is dit dalk meer sinvol om dit te doen op vorm voorlegging:

$('form').submit(function() {
    $('input[type=submit]', this).attr("disabled","disabled");
});

Maar ek dink ons kan'n beter antwoord op jou vraag as ons geweet het'n bietjie meer oor die konteks.

As dit is'n ajax versoek, dan sal jy nodig het om seker te maak dat jy in staat stel dien knoppies weer op óf die sukses of mislukking.

As dit is'n standaard HTTP vorm voorlegging (afgesien van die aanskakel van die knoppie met javascript) en jy doen dit om die veilige guard van verskeie voorleggings van die dieselfde vorm, dan is jy behoort te het'n soort van beheer in die kode wat handel met die voorgelê data, want die aanskakel van'n knoppie met javascript kan nie verhoed dat verskeie voorleggings.

Ander wenke

Jy kan iets soos dit te doen: 

$('form').submit(function() {
    $(this)
        .find(":submit,:image")             // get all the submit buttons
        .attr({ disabled : 'disabled' })    // disable them
        .end()                              // go back to this form
        .submit(function() {                // change the onsubmit to always reject.
            return false;
        })
    ;
});

Voordele van hierdie:

  • Dit sal saam met al jou vorms, met al die metodes van inhandiging:
    • kliek op 'n handig element
    • Enter of
    • 'n beroep form.submit() uit 'n ander kode
  • Dit sal afskakel al dien elemente:
    • <input type="submit"/>
    • <button type="submit"></button>
    • <input type="image" />
  • dit is regtig kort.

Ek vermoed dat jy nie wil hê hulle moet die stuur knoppie meer as een keer terwyl die stuur getref is verwerking.

My benadering is om net geheel en al verberg die knoppie en vertoon 'n soort van status aanwyser (geanimeerde gif, ens) in plaas.

Hier is 'n baie slinks voorbeeld (dit is tegnies in prototipe, maar ek dink 'n jQuery weergawe sou baie soortgelyk wees): 

<html>
    <head>
        <script type="text/javascript" src="include/js/prototype.js"></script>

        <script type="text/javascript">
            function handleSubmit()
            {
                $('submit').hide();
                $('progressWheel').show();
                return true;
            }
        </script>
    </head>
    <body>
        <img src="include/images/progress-wheel_lg.gif" id="progressWheel" style="display:none;"/>
        <input type="submit" name="submit" id="submit" value="Submit" onclick="handleSubmit();"/>
    </body>
</html>

in JQuery: 

$('#SubmitButtonID').click(function() { this.disabled = true; });

Op ding om bewus te wees van is dat jy nie die knoppie voordat die vorm ingedien moet afskakel. As jy op die knoppie met behulp van JavaScript in die OnClick event te skakel kan jy verloor die vorm in te dien.

So ek stel voor jy die knoppie met behulp van JavaScript deur die plasing van 'n beeld bo dit of deur die verskuiwing van die knoppie uit die sigbare reeks weg te steek. Wat moet toelaat dat die vorm in te dien om normaal voort te gaan.

Daar is drie maniere om 'n vorm wat gedek moet word in te dien. Gebruik beide David McLaughlin en Jimmy se voorstelle. Een sal afskakel die knoppie vorm element in te dien, terwyl die ander versper die basiese HTML vorm in te dien.

Vir die derde, hierdie sal nie Javascript om dit te doen 'n form.submit skakel (). Die OnSubmit="return false" metode is slegs van toepassing wanneer 'n gebruiker op die stuur knoppie druk of druk Tik in 'n toevoer vorm element. Kliënt kant skripte sal nodig hê om sowel hanteer word.

Hoe gaan dit

Code agter :

btnContinue3.Attributes.Item ( "onclick") = "disableSubmit ()"

Javascript : 

function disableSubmit() {
    document.getElementById('btnContinue3').onclick = function() { 
        alert('Please only click once on the submit button!'); return false;
    };
}

Dit nie die geval op te los die probleem van wat gebeur as die postback keer uit, maar anders as wat dit vir my gewerk het.

Gelisensieer onder: CC-BY-SA met toeskrywing
Nie verbonde aan StackOverflow
scroll top