Voorkom het indienen van meerdere formulieren met Javascript

Ik heb een HTML/PHP-gebaseerd formulier met twee Submit-knoppen: één bovenaan en één onderaan. Ik moet voorkomen dat mensen meerdere keren op Submit drukken (waardoor meerdere records in onze database worden gemaakt), dus ik gebruikte een techniek die hier om het zo te maken dat de knop Verzenden wordt uitgeschakeld wanneer erop wordt geklikt, en ook de tekst op de knop verandert van "Indienen" in "Aanleveren, even geduld aub ...".

Ik heb nu twee problemen:

  1. Alleen de bovenste knop op het formulier wordt uitgeschakeld en de tekst is gewijzigd. De onderste knop Verzenden wordt niet beïnvloed. Hoe maak ik het zodat beide knoppen worden uitgeschakeld/gewijzigd na verzending?
  2. Mijn pagina heeft een functie validateForm() die wordt aangeroepen wanneer op de knop Verzenden wordt geklikt. Dus als de gebruiker een verplicht veld niet invult, wordt een berichtvenster weergegeven en wordt hij teruggestuurd naar het formulier. Maar nu is de bovenste knop Verzenden nog steeds uitgeschakeld (en heeft de gewijzigde tekst). Hoe "reset" ik de knoppen terug naar hun reguliere "Submit" -status als de validatiefunctie fouten aantreft?

Hier zijn de relevante codefragmenten. Als ik de code verwijder die de knop uitschakelt/wijzigt, wordt het formulier normaal verzonden (maar ik krijg natuurlijk niet de functionaliteit die ik zoek).

Formuliertag:

<form name="MyInquiry" method="post" autocomplete="off" onsubmit="document.getElementById('submitButtonTop').disabled=true;document.getElementById('submitButtonTop').value='Submitting, please wait...';document.getElementById('submitButtonBottom').disabled=true;document.getElementById('submitButtonBottom').value='Submitting, please wait...';return validateInquiryForm();">

Tags voor de knoppen:

<input type="submit" name="submitinquiryform" id="submitButtonTop" value="Submit Form" />

<input type="submit" name="submitinquiryform" id="submitButtonBottom" value="Submit Form" />

Validatie functie:

    function validateInquiryForm() {



 var valid = true;
        var errorMessage = "";

        var emailFilter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

... code to validate individual fields ...

    if (!valid)
                alert(errorMessage);

            return valid;
        }

Bedankt, John

0
@onatm: dezelfde klasse misschien, zelfde id = slecht. id's moeten uniek zijn op een pagina.
toegevoegd de auteur Marc B, de bron
We zullen een aantal van uw code moeten zien om goed advies te kunnen geven.
toegevoegd de auteur Vincent Ramdhanie, de bron
@onatm ik dacht dat je sarcastisch was toen je zei: geef beide knoppen hetzelfde ID
toegevoegd de auteur david, de bron
hoe zit het met het geven van beide knoppen dezelfde id/klasse?
toegevoegd de auteur onatm, de bron
@ MarCB bedankt voor uw advies.
toegevoegd de auteur onatm, de bron
@david acctually ik heb nooit gedacht dat id's uniek moeten zijn, maar ik heb ze altijd als uniek gebruikt. misschien is het enige sarcasme hier dat :)
toegevoegd de auteur onatm, de bron

3 antwoord

onsubmit="
    document.getElementById('myButtonTOP').disabled=true;
    document.getElementById('myButtonTOP').value='Submitting, please wait...';
    document.getElementById('myButtonBOTTOM').disabled=true;
    document.getElementById('myButtonBOTTOM').value='Submitting, please wait...';
    return true;"

Het is beter om een ​​javascript-functie te bellen die is aangegeven in een <script> </script> regio natuurlijk.

Dus ik zou een functie schrijven zoals ...

var mySubmitted = false;

function MyCheckSubmit()
{
    if (mySubmitted)
        return false;//Already submitted!

    if (!validateInquiryForm())
        return false;//Validation failed!

   //disable submit buttons

    document.getElementById('myButtonTOP').disabled=true;
    document.getElementById('myButtonTOP').value='Submitting, please wait...';
    document.getElementById('myButtonBOTTOM').disabled=true;
    document.getElementById('myButtonBOTTOM').value='Submitting, please wait...';

   //Store in our global variable that we submitted this form.
    mySubmitted = true;

    return true;//Ok, we can submit!
}

en natuurlijk in de vorm

onsubmit="return MyCheckSubmit();"

Dit werkt ook als u meerdere keren op de "enter" -toets drukt in een invoertekstvak, omdat het een interne variabele gebruikt om te controleren of het formulier al is ingediend.

Zorg ervoor dat het scriptblok natuurlijk vóór het formulier wordt vermeld, mogelijk in het hoofdgedeelte.

1
toegevoegd
Gewijzigd, probeer zoiets als ik nu heb bewerkt.
toegevoegd de auteur Salvatore Previti, de bron
Bedankt, dit is wat ik aan het doen ben en het lijkt te werken voor zover het uitschakelen/veranderen van de knoppen betreft. Maar het geeft niet echt het formulier in; er worden geen records in mijn database gemaakt.
toegevoegd de auteur johnnyb10, de bron
Bedankt; Ik heb deze nieuwe versie geprobeerd en het leek gedeeltelijk te werken. Het formulier is correct ingediend, maar de knoplabels zijn niet bijgewerkt en de knoppen zijn niet uitgeschakeld. Toen besefte ik dat ik de verkeerde knopnamen had; Ik had de knopnamen die u in uw voorbeeld gebruikte, nog niet gewijzigd. Dus ik heb de knopnamen gecorrigeerd, maar nu heb ik het omgekeerde probleem: de knoppen uitschakelen/wijzigen, maar het formulier wordt niet verzonden. Om het even welke ideeën?
toegevoegd de auteur johnnyb10, de bron

@onatm: Het gebruik van hetzelfde ID zal niet helpen. Alleen het eerste exemplaar van de tag wordt afgehandeld door JS, niet die daarna.

Je kunt zoiets doen .... Gebruik jQuery. Geef beide knoppen dezelfde klasse zeg "VERSTUREN". Schrijf nu de volgende code:

var myForm = document.forms[0];
$(document).ready(function(){
    $(".SUBMIT").click(function(){
        if(validateInput()){
            $(".SUBMIT").attr("disabled", true).val("Submitting..");
            var url = "any URL you like";
            var data = {
                           field1: myForm.field1.value,
                           field2: myForm.field2.value,
                           .
                           .
                       };
            $.post(url, data,
                function(Result){
                    alert(Result);//Write whatever logic you want
                }
            )
            .complete(function(){
               $(".SUBMIT").attr("disabled", false).val("Submit");
            })
            .error(function(){
               alert("Some error");
               $(".SUBMIT").attr("disabled", false).val("Submit"); 
            });
        }
        else{
            alert("Enter the missing fields first");//Write whatever your logic
        }
    });
});

function validateInput(){
    if (all fields are entered)//Write you logic here
        return true;
    else
        return false
}

De code moet je eerste probleem oplossen. Voor het tweede probleem moet u expliciet code schrijven om de authenticiteit te testen voor elk veld in de functie validateInput() .

1
toegevoegd
Als u niets weet over jQuery, downloadt u eenvoudig elke versie van jQuery.1.6.x.js van jquery.com . Voeg het toe aan de <head> -tag van uw webpagina zoals deze <script src = "yourpath/jquery.1.6.x.js" /> Schrijf de code die ik daarna heb gepost.
toegevoegd de auteur kush.impetus, de bron
@ johnnyb10: Het is goed. Maar ik stel voor om het een keer te proberen, niet in je project. In eerste instantie lijkt het moeilijk (bijna voor iedereen), maar als je je er comfortabel mee begint te voelen, zul je het graag overal gebruiken. Het zal veel tijd en moeite besparen. In feite is dat de monoloog van jQuery ... CODE MINDER, DOE MEER. Sorry, maar ik dwing je NIET om het te gebruiken.
toegevoegd de auteur kush.impetus, de bron
Bedankt; Ik zou willen vermijden om jQuery te gebruiken indien mogelijk. Dit is voor werk en ik weet niet zeker of ze willen dat ik dat aan het formulier toevoeg. (Ik ben onwetend over jQuery, dus er is misschien geen reden tot bezorgdheid, maar ik wil de oplossing zo eenvoudig mogelijk houden.)
toegevoegd de auteur johnnyb10, de bron
in ieder geval zei ik id/klasse :) maar bedankt en MarkB voor het verduidelijken hiervan.
toegevoegd de auteur onatm, de bron

you could place this in correct condition when the form validation conditions are met, thus only disabling on submit, you would need to return 'this' as reference in your onsubmit="return MyCheckSubmit(this);"

  var topButton = document.MyInquiry.submitinquiryform;//top
  var botomButton = document.otherMyInquiry.submitinquiryform;//bottom

 if(beingSubmitted.name == "MyInquiry"){ 

   topButton.value = "Please wait...";
   //beingSubmitted.action = "process.php"//action page
   beingSubmitted.submit();

  }else{
   //beingSubmitted.action = "process2.php"//action page
    botomButton.value = "Please wait...";
    beingSubmitted.submit();
}
//beingSubmitted.action = "process.php"//action page would handle for both form you could check which form is being submitted by sending a value in a hidden filed 
 topButton.disabled = true;
 botomButton.disabled = true; 

Ik heb gemerkt dat je geen actie hebt ondernomen op het formulier

0
toegevoegd