Javascript yordamida bir nechta ariza topshirishni taqiqlash

Ikkala Submit tugmasini bosib, HTML/PHP asosidagi arizam bor, biri yuqorisida, ikkinchisi pastki qismida. Men bir necha marta yuborishni boshlashimga yo'l qo'ymasligim kerak (shuning uchun bizning ma'lumotlar bazamizda bir nechta yozuvlar yaratilgan), shuning uchun men bu yerda tugmasi bosilganda Yuborish tugmasi o'chirib qo'yiladi va tugma matni "Yuborish" dan "Yuklab olish; Iltimos, kuting ..." ga o'zgartirilsin.

Hozir ikkita muammo bor:

  1. Shakli ustki qismidagi tugma faqat o'chirib qo'yilgan va matn o'zgargan. Pastki tugmasini bosish kerak emas.
  2. Ikkala tugma ham o'chirib qo'yiladimi?

  3. Mening sahifa Yuborish tugmasi bosilganda chaqiradigan validateForm() funktsiyasiga ega. Shuning uchun foydalanuvchi kerakli maydonni to'ldirmasa, xabar qutisi ko'rsatiladi va u qaytarib yuboriladi. Endi esa "Yuborish" tugmasi hali ham o'chirib qo'yilgan (va o'zgartirilgan matn bor). >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> <

Kodning tegishli qismlari keltirilgan. Agar tugmachani o'chiradigan/o'zgartiradigan kodni olib tashlasam, ariza odatdagi tarzda yuboriladi (lekin, albatta, men izlayotgan vazifani topa olmayapman).

Forma yorlig'i:

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

Tugmalar uchun teglar:

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

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

Tasdiqlash funktsiyasi:

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

Rahmat, Jon

0
@onatm: bir xil sinf, ehtimol, bir xil id = yomon. identifikatorlari sahifada noyob bo'lishi kerak.
qo'shib qo'ydi muallif Marc B, manba
Sizning ba'zi kodlaringizni to'g'ri maslahat berishni ko'rishimiz kerak.
qo'shib qo'ydi muallif Vincent Ramdhanie, manba
Agar siz ikkala tugmachani bir xil identifikatorni berishni aytganingizda, bu erda siz qayg'uli bo'lishingiz mumkin
qo'shib qo'ydi muallif david, manba
ikkala tugmachani bir xil id/sinfga berish haqida nima deyish mumkin?
qo'shib qo'ydi muallif onatm, manba
@ MarcB tavsiyangiz uchun rahmat.
qo'shib qo'ydi muallif onatm, manba
@david Aslida idlar noyob bo'lishi kerak, lekin men ularni har doim noyob sifatida ishlatganman. Ehtimol, bu erda faqat yolg'onchilik :)
qo'shib qo'ydi muallif onatm, manba

3 javoblar

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

<script> </script> hududida e'lon qilingan JavaScript funktsiyasini chaqirish yaxshiroq bo'lardi.

Men shunga o'xshash vazifani yozaman ...

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

va, albatta, shaklda

onsubmit="return MyCheckSubmit();"

Agar siz ariza allaqachon yuborilganligini tekshirish uchun ichki o'zgaruvchidan foydalanadigan bo'lgani uchun, bu siz kiritgan matn qutisiga bir necha marta "kirish" tugmasini bosganingizda ham ishlaydi.

Shubhasiz skript blokini, ehtimol, bosh qismida e'lon qilishni ehtiyot qiling.

1
qo'shib qo'ydi
O'zgartirib qo'ydim, hozirgi kabi tahrir qilaman.
qo'shib qo'ydi muallif Salvatore Previti, manba
Rahmat, bu men qiladigan narsa, va tugmachalarni o'chirib qo'yish/o'zgartirgandan ko'ra ishlaydi. Lekin, u aslida ariza bermaydi; ma'lumotlar bazamda hech qanday yozuv yozilmagan.
qo'shib qo'ydi muallif johnnyb10, manba
Rahmat; Ushbu yangi versiyani sinab ko'rdim va qisman ishlay boshladim. Shakl to'g'ri topshirildi, ammo tugmacha teglari yangilanmadi va tugmalar o'chirilmadi. Keyin men noto'g'ri tugma nomlari borligini tushundim; Sizning namunangizda ishlatgan tugma nomlarini hali o'zgartmagandim. Shuning uchun tugma nomlarini tuzatdim, lekin hozirda teskari muammonim bor: tugmachalarni o'chirib qo'yish/o'zgartirish, lekin ariza topshirilmaydi. Har qanday fikr bormi?
qo'shib qo'ydi muallif johnnyb10, manba

@onatm: Bir xil identifikatordan foydalanish sizga yordam bermaydi. Yorliqning faqat birinchi nusxasi JS tomonidan amalga oshiriladi, bundan keyin emas.

Bunga o'xshash biror narsa qilishingiz mumkin .... Jquery-dan foydalaning. Ikkala tugmani bir xil sinfda "SUBMIT" deb ayting. Endi quyidagi kodni yozing:

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 birinchi muammoingizni hal qilishi kerak. Ikkinchi muammo uchun validateInput() funktsiyasidagi har bir maydon uchun haqiqiyligini tekshirish uchun kodni aniq yozing.

1
qo'shib qo'ydi
Agar siz jQuery haqida bilmasangiz jquery.com dan jquery.1.6.x.js versiyasini yuklab oling. Buni veb-sahifangizning <head> yorlig'iga qo'shishingiz mumkin, bu kabi Men undan keyin qo'ygan kodni yozing.
qo'shib qo'ydi muallif kush.impetus, manba
@ johnnyb10: Yaxshi. Lekin, men buni sizlarga emas, balki loyihaga taklif qilishni taklif qilaman. Dastlab bu juda qiyin ko'rinadi (deyarli har bir kishi uchun), ammo siz uni qulaylashtira boshlaganingizdagina uni qo'llagan joydan foydalanishni yaxshi ko'rasiz. Bu ko'p vaqt va kuch sarflaydi. Aslida, bu jqueryning monologidir ... KOD BOShQA, DO'STLAR. Kechirasiz, lekin men sizni uni ishlatishga majburlamayman.
qo'shib qo'ydi muallif kush.impetus, manba
Rahmat; Agar iloji bo'lsa, jquery-dan foydalanishdan qochmoqchiman. Bu ish uchun, va men bu formaga qo'shishimni istashimga amin emasman. (Men jQuery haqida johillik qilyapman, shuning uchun tashvishning sababi bo'lmasligi mumkin, lekin men yechimni iloji boricha soddalashtirmoqchiman.)
qo'shib qo'ydi muallif johnnyb10, manba
hech bo'lmaganda id/sinf :) dedim, lekin buni tushuntirish uchun sizga va MarkBga minnatdorman.
qo'shib qo'ydi muallif onatm, manba

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; 

Men sizning shaklingizda hech qanday harakat yo'qligini payqadim

0
qo'shib qo'ydi
Javascript UZB
Javascript UZB
99 ishtirokchilar

@js_uzb @vuejs_uz @react_uz @nodejs_uz @angular_uz @ngTashkent @yiiframework_uz @laravel_uz @linux_uzbek @python_uz @swift_uzb —————— @uzdevgroup @UzGeeksGroup ——— @UzDev_Jobs @jobs_uzb