Voorkom het indienen van meerdere formulieren met Javascript

Question

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:

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?
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

toegevoegd 27 oktober 2011 op 06:17 de auteur johnnyb10 bewerkt 27 oktober 2011 op 07:09

Bekeken: 10

de bron

@onatm: dezelfde klasse misschien, zelfde id = slecht. id's moeten uniek zijn op een pagina.

toegevoegd 27 oktober 2011 op 06:29, de auteur Marc B, de bron

We zullen een aantal van uw code moeten zien om goed advies te kunnen geven.

toegevoegd 27 oktober 2011 op 06:19, de auteur Vincent Ramdhanie, de bron

@onatm ik dacht dat je sarcastisch was toen je zei: geef beide knoppen hetzelfde ID

toegevoegd 27 oktober 2011 op 08:55, de auteur david, de bron

hoe zit het met het geven van beide knoppen dezelfde id/klasse?

toegevoegd 27 oktober 2011 op 06:19, de auteur onatm, de bron

@ MarCB bedankt voor uw advies.

toegevoegd 27 oktober 2011 op 06:31, 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 27 oktober 2011 op 09:37, de auteur onatm, de bron

3 antwoord

de auteur Salvatore Previti · Answer 1 · 2011-10-27T06:18Z

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.

de auteur kush.impetus · Answer 2 · 2011-10-27T06:39Z

@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() .

de auteur david · Answer 3 · 2011-10-27T09:31Z

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