Javascript арқылы бірнеше пішін жіберуді болдырмаңыз

Менде екі Submit түймешігі бар HTML/PHP формасы бар, біреуі жоғары және төменгі жағында. Адамдар бірнеше рет жіберуді басудан аулақ болу керек (осылайша біздің дерекқорымызда бірнеше жазбалар жасалуда), сондықтан мен мұнда батырмасын басу арқылы «Жіберу» түймешігі өшіріледі де, «Жіберу» тармағынан «Жіберу» пәрменін таңдаңыз.

Қазірде екі мәселе бар:

  1. Пішіндегі тек жоғарғы түймешік өшіріліп, оның мәтіні өзгерді. Төменгі Жіберу түймешігін басыңыз.
  2. Менің бетті Жіберу түймешігі басылған кезде шақырылатын validateForm() функциясы бар. Сондықтан егер пайдаланушы міндетті өрісті толтырмаса, хабарлама жолағы көрсетіледі және ол пішінге қайта бағытталады. Бірақ енді Жоғарғы жіберу батырмасы әлі де өшірілген (және өзгертілген мәтіні бар). Тексеру функциясы қателерді тапса, түймелерді қайтадан «Жіберу» күйіне қалай «қайта» қоямын?

Міне кодтың тиісті үзінділері. Егер кодты өшіретін/өзгертетін кодты алып тастасам, пішін қалыпты түрде жіберіледі (бірақ, әрине, мен іздейтін функционалдылықты аламын).

Пішін тегі:

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

Түймелері үшін тегтер:

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

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

Тексеру функциясы:

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

Рахмет, Джон

0
@onatm: сол класс болуы мүмкін, сол id = bad. иелер бір беттегі бірегей болуы керек.
қосылды автор Marc B, көзі
Кейбір кодтарыңыз дұрыс кеңес беру үшін қажет.
қосылды автор Vincent Ramdhanie, көзі
@onatm мен сізді ойлайсыз, мұнда сіз саркастиктің екеуін де бірдей идентификаторды беруіңіз керек
қосылды автор david, көзі
екеуін де бірдей идентификатор/сыныпты беру туралы не айтасыз?
қосылды автор onatm, көзі
@MarcB сіздің кеңесіңіз үшін алғыс айтамыз.
қосылды автор onatm, көзі
@david acctually, бұл ids бірегей болуы керек, бірақ мен оларды әрдайым бірегей ретінде қолданамын деп ойлаған емеспін. мүмкін, мұнда тек сарказм бұл :)
қосылды автор onatm, көзі

3 жауаптар

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> аймағында жарияланған JavaScript функциясын шақырған дұрыс.

Мәселен, мен осындай функцияны жазу едім ...

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

және, әрине, түрінде

onsubmit="return MyCheckSubmit();"

Сондай-ақ, егер сіз форма әлдеқашан жіберілгенін тексеру үшін ішкі айнымалыны пайдаланатындықтан, кіріс мәтіндік жәшігінде бірнеше рет «енгізу» пернесін бассаңыз, бұл жұмыс істейді.

Әрине, сценарийлер блогын бланкке дейін, бас бөлігінде жариялауға тырысыңыз.

1
қосылды
Өзгертілді, қазір редакцияланғандай бірдеңені көріңіз.
қосылды автор Salvatore Previti, көзі
Рахмет, бұл мен істеп жатырмын, және түймелерді өшіру/ауыстыру мәселесі бойынша жұмыс істеген сияқты көрінеді. Бірақ бұл нысанды нақты ұсынбайды; менің дерекқорымда жазбалар жасалмаған.
қосылды автор johnnyb10, көзі
Рахмет; Мен бұл жаңа нұсқаны көрдім және ішінара жұмыс істегендей көріндім. Пішін дұрыс берілді, бірақ түйме жапсырмалары жаңартылмады және түймелер өшірілмеді. Сонда мен қате түймешіктердің аттары болғанын түсіндім; Мен сіздің мысалыңызда пайдаланған батырманың атауын әлі өзгерткен жоқпын. Сондықтан мен батырманың атауын түзетіп алдым, бірақ қазір кері проблема бар: түймелерді өшіру/өзгерту, бірақ пішін жіберілмейді. Кез келген идеялар?
қосылды автор johnnyb10, көзі

@onatm: Бірдей идентификаторды пайдалану көмектеспейді. Тегтің тек бірінші данасы JS арқылы ғана емес, одан кейін өңделетін болады.

Сізге осындай нәрсе жасауға болады .... jQuery пайдаланыңыз. Бір сыныпты «SUBMIT» деп айтыңыз. Енді келесі кодты жазыңыз:

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
}

Кодекс бірінші мәселені шешуі керек. Екінші мәселе үшін validateInput() функциясының әр өрісі үшін түпнұсқалығын тексеру үшін кодты анық жазыңыз.

1
қосылды
Jquery туралы білмесеңіз, jquery.com деген jquery.1.6.x.js нұсқасын жүктеп алыңыз. Веб-беттің <head> тегіне осы <script src = «yourpath/jquery.1.6.x.js» /> сияқты енгізіңіз.
қосылды автор kush.impetus, көзі
@ johnnyb10: Жақсы. Бірақ мен оны сізге ұсынбаймын, бірақ сізде жоба жоқ. Бастапқыда ол қатты көрінеді (барлығы дерлік), бірақ сіз онымен ыңғайлы бола бастасаңыз, оны кез-келген жерде қолдануға болады. Бұл көп уақыт пен күш жұмсайды. Шын мәнінде бұл jQuery монологы ... КОД КІРУ, КӨБІРЕК. Кешіріңіз, бірақ мен оны пайдалануға мәжбүрмеймін.
қосылды автор kush.impetus, көзі
Рахмет; Мүмкін болса, jquery-ды пайдаланудан аулақ болғым келеді. Бұл жұмыс үшін, және мен бұл нысанға оны қосуды қалайтынына сенімді емеспін. (Jquery туралы білмеймін, сондықтан алаңдаушылық туғызбайды, бірақ шешімімді мүмкіндігінше қарапайым түрде сақтағым келеді.)
қосылды автор johnnyb10, көзі
кем дегенде, id/class деп айттым :) бірақ бұл түсініктеме үшін сіз және MarkB рахмет.
қосылды автор onatm, көзі

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; 

Мен сіздердің формада ешқандай әрекет жасамайтыныңызды байқадым

0
қосылды