Javascript kullanarak çoklu form gönderimini engelle

Üstte ve altta bir tane olmak üzere iki Submit butonu olan bir HTML/PHP tabanlı formum var. İnsanların bir çok kez Gönder düğmesine basmasını engellemem gerekiyor (böylece veritabanımızda birden fazla kayıt oluşturuyor), bu yüzden bir teknik kullandım burada tıklatıldığında Gönder butonu devre dışı bırakılacak ve düğmedeki metin "Gönder" ile "Gönderiliyor; lütfen bekleyin ..." şeklinde değişir.

Şimdi iki problemim var:

  1. Yalnızca formdaki üst düğme devre dışı bırakılıyor ve metni değişiyor. Alt Gönder düğmesi etkilenmez. Her iki düğmenin gönderildikten sonra devre dışı bırakılması/değiştirilmesi için nasıl yapabilirim?
  2. Sayfamın, Gönder düğmesine tıklandığında çağrılan bir validateForm() işlevi vardır. Böylece kullanıcı gerekli bir alanı doldurmazsa, bir mesaj kutusu görüntülenir ve tekrar forma yönlendirilir. Ancak şimdi üst Gönder düğmesi hala devre dışı (ve değişmiş metin var). Doğrulama işlevi hata bulduğunda düğmeleri tekrar etkin "Gönderme Durumu" durumuna nasıl geri döndürürüm?

İşte kodun ilgili snippet'leri. Düğmeyi devre dışı bırakan/değiştiren kodu kaldırırsam, form normal olarak gönderir (ancak tabii ki aradığım işlevi alamıyorum).

Form etiketi:

<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();">

Düğmeler için etiketler:

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

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

Doğrulama fonksiyonu:

    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;
        }

Teşekkürler, John

0
@onatm: aynı sınıf belki, aynı kimlik = kötü. kimlikleri bir sayfada benzersiz olmalıdır.
katma yazar Marc B, kaynak
Doğru tavsiyelerde bulunmak için kodunuzun bir kısmını görmemiz gerekecek.
katma yazar Vincent Ramdhanie, kaynak
@onatm ben her iki düğmeyi aynı kimliği ver dediğin zaman alaycı olman gerektiğini
katma yazar david, kaynak
her iki düğmeyi aynı kimlik/sınıfa vermekten ne haber?
katma yazar onatm, kaynak
@MarcB tavsiyeniz için teşekkür ederim.
katma yazar onatm, kaynak
@david acctually asla ids benzersiz olmalı ama her zaman onları benzersiz olarak kullanıyorum. belki de buradaki tek alaycılık budur :)
katma yazar onatm, kaynak

3 cevap

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;"

Elbette bir <script> </script> bölgesinde bildirilen JavaScript işlevini çağırmak daha iyi olur.

Ben de böyle bir işlev yazarım ...

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!
}

ve tabii ki formda

onsubmit="return MyCheckSubmit();"

Bu, aynı zamanda, formun gönderilip gönderilmediğini kontrol etmek için dahili bir değişken kullandığı için, giriş metin kutusuna birden çok kez "enter" tuşuna basarsanız da çalışır.

Tabaka satırını, formun önündeki, muhtemelen baş bölümünün içinde ilan etmeyi unutmayın.

1
katma
Değişti, şimdi düzenlediğim gibi bir şey dene.
katma yazar Salvatore Previti, kaynak
Teşekkürler, yaptığım şey budur ve düğmelerin devre dışı bırakılması/değiştirilmesiyle ilgili olarak çalışıyor gibi görünüyor. Ama aslında formu sunmuyor; veritabanımda kayıt oluşturulmadı.
katma yazar johnnyb10, kaynak
Teşekkürler; Bu yeni sürümü denedim ve kısmen çalışmak gibi görünüyordu. Form doğru bir şekilde gönderildi, ancak düğme etiketleri güncellenmedi ve düğmeler devre dışı bırakılmadı. Sonra yanlış buton isimleri olduğunu fark ettim; Örneğinizde kullandığınız düğme adlarını henüz değiştirmedim. Bu yüzden düğme isimlerini düzelttim, ama şimdi ters problemim var: düğmeler devre dışı/değiştir, ancak form sunulmuyor. Herhangi bir fikir?
katma yazar johnnyb10, kaynak

@onatm: Aynı kimliği kullanmak yardımcı olmayacaktır. Sadece etiketin ilk örneği JS tarafından ele alınacak, bundan sonra olanlar değil.

Böyle bir şey yapabilirsiniz .... jQuery kullanın. Her iki düğmeyi de aynı sınıfta "SUNUCU" yaz. Şimdi aşağıdaki kodu yazınız:

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
}

Kod ilk probleminizi çözmelidir. İkinci sorun için validateInput() işlevindeki her alan için özgünlüğü sınamak amacıyla açık bir kod yazmanız gerekir.

1
katma
JQuery hakkında bilgi sahibi değilseniz, jquery.com 'dan herhangi bir sürümü jquery.1.6.x.js ' i indirmeniz yeterlidir. Web sayfanızın etiketine bu şekilde ekleyin <script src = "yourpath/jquery.1.6.x.js" /> Bundan sonra gönderdiğim kodu yazın.
katma yazar kush.impetus, kaynak
@ johnnyb10: Sorun değil. Ama ben sana bir şans vermeyi öneriyorum, projenin içinde değil. Başlangıçta zor görünüyor (neredeyse herkese), ama onunla rahat olmaya başlarken, her yerde kullanabileceğinizi çok beğeneceksiniz. Çok zaman ve çaba harcayacaktır. Aslında, bu jQuery monolog ... KODU DAHA, DAHA FAZLA. Üzgünüm, ama seni kullanmaya zorlamıyorum.
katma yazar kush.impetus, kaynak
Teşekkürler; Mümkünse jQuery kullanmaktan kaçınmak istiyorum. Bu iş içindir ve bunu forma eklememi istediğinden emin değilim. (JQuery hakkında bilgisizim, bu yüzden endişelenecek bir sebep yok ama çözümü mümkün olduğunca basit tutmak istiyorum.)
katma yazar johnnyb10, kaynak
en azından id/class :) dedim ama bunu açıklığa kavuşturduğun için teşekkürler MarkB.
katma yazar onatm, kaynak

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; 

Formda hiçbir işlemin olmadığını farkettim.

0
katma