Kod JavaScript, aby zatrzymać przesyłanie formularza

205

Jednym ze sposobów zatrzymania przesyłania formularza jest zwrócenie wartości false z funkcji JavaScript.

Po kliknięciu przycisku wysyłania wywoływana jest funkcja sprawdzania poprawności. Mam przypadek walidacji formularza. Jeśli ten warunek jest spełniony, wywołuję funkcję o nazwie returnToPreviousPage ();

function returnToPreviousPage() {
    window.history.back();
}

Używam JavaScript i Dojo Toolkit .

Zamiast wracać do poprzedniej strony, przesyła formularz. Jak mogę przerwać przesyłanie i wrócić do poprzedniej strony?

javascript html forms Muhammad Imran Tariq
źródło
RU Pewnie, że ta funkcja wywołuje ?? spróbuj wprowadzić alert („test”); przed window.history
samirprogrammer
tak jestem pewna; to się nazywa.
Muhammad Imran Tariq
8
możliwy duplikat Jak zapobiec przesłaniu formularza?
TJ

Odpowiedzi:

291

Możesz użyć wartości zwracanej przez funkcję, aby zapobiec przesłaniu formularza

<form name="myForm" onsubmit="return validateMyForm();">

i działają jak

<script type="text/javascript">
function validateMyForm()
{
  if(check if your conditions are not satisfying)
  { 
    alert("validation failed false");
    returnToPreviousPage();
    return false;
  }

  alert("validations passed");
  return true;
}
</script>

W przypadku Chrome 27.0.1453.116 m, jeśli powyższy kod nie działa, ustaw pole returnValue parametru modułu obsługi zdarzeń na false, aby działało.

Dzięki Sam za udostępnienie informacji.

EDYTOWAĆ :

Dzięki Vikram za jego obejście, jeśli validateMyForm () zwraca false:

 <form onsubmit="event.preventDefault(); validateMyForm();">

gdzie validateMyForm () to funkcja, która zwraca false, jeśli sprawdzanie poprawności się nie powiedzie. Kluczową kwestią jest użycie zdarzenia name. Nie możemy użyć dla egepreventDefault ()

Hemant Metalia
źródło
1
Tylko zgadnij: nie działa dla mnie w najnowszej wersji Chrome.
Sam
5
Wszystko, co powraca false, nie wydaje się mieć żadnego wpływu; Chrome nadal przesyła formularz. Na przykład onsubmit="return false;". Jednak ustawienie obsługi zdarzeń za parametru returnValueboiska i falsedziała dla mnie.
Sam
3
Cześć Sam / Hemant, czy możesz podać próbkę kodu, jak ustawić wartość parametru returnValue parametru obsługi zdarzenia na false.
JackDev,
2
Myślę, że skoro jest to zaakceptowana odpowiedź, prawdopodobnie powinna powiedzieć, jak zrobić to poprawnie. Wraz z JackDevem zastanawiam się, jak to zrobić, aby działało poprawnie. Jak to nie działa
Cruncher
1
Jeśli validateMyForm()ma błędy return falsenie zostaną osiągnięte. Więc to może się nie powieść. Po wielu godzinach znalazłem rozwiązanie, które działa i opublikowałem je poniżej.
Vikram Pudi
116

Użyj opcji zapobiegania domyślnym

Zestaw narzędzi Dojo

dojo.connect(form, "onsubmit", function(evt) {
    evt.preventDefault();
    window.history.back();
});

jQuery

$('#form').submit(function (evt) {
    evt.preventDefault();
    window.history.back();
});

Waniliowy JavaScript

if (element.addEventListener) {
    element.addEventListener("submit", function(evt) {
        evt.preventDefault();
        window.history.back();
    }, true);
}
else {
    element.attachEvent('onsubmit', function(evt){
        evt.preventDefault();
        window.history.back();
    });
}
Greg Guida
źródło
3
Polecam event.preventDefault () nad return false dla wielu powodów, powinno to być górna odpowiedź: blog.nmsdvid.com/...
acidjazz
1
Dobra odpowiedź. Lepszy niż wybrany.
Ani Menon,
2
Dobrze, ale gdzie przeprowadziłbyś weryfikację, jakiej chce OP?
Sahand
1
@acidjazz Ale jak można uzyskać dostęp do danych formularza po zapobieganiu domyślnemu?
CodeAt30
@Sahand @ codeat30 Możesz uzyskać dostęp do wydarzenia target.
Adrien
49

Obecnie działa (testowany w Chrome i Firefox):

<form onsubmit="event.preventDefault(); validateMyForm();">

Gdzie validateMyForm () to funkcja zwracana w falseprzypadku niepowodzenia sprawdzania poprawności. Kluczową kwestią jest użycie nazwy event. Nie możemy używać do np e.preventDefault().

Vikram Pudi
źródło
15

Wystarczy użyć prostego buttonzamiast przycisku przesyłania. I wywołaj funkcję JavaScript do obsługi przesyłania formularza:

<input type="button" name="submit" value="submit" onclick="submit_form();"/>

Funkcja w scripttagu:

function submit_form() {
    if (conditions) {
        document.forms['myform'].submit();
    }
    else {
        returnToPreviousPage();
    }
}

Możesz także spróbować window.history.forward(-1);

dku.rajkumar
źródło
Podoba mi się to podejście, ponieważ pozwala ono na mój przypadek użycia, wywołania zwrotne.
Eddie
12
Zapobiega to użyciu klawisza Enter do przesłania formularza. Ponadto nowe atrybuty HTML5, takie jak required, nie będą działać.
Sam
8

Wiele trudnych sposobów na łatwą rzecz:

<form name="foo" onsubmit="return false">
Danial
źródło
3
Ta dokładna odpowiedź (OK, nie do końca, ponieważ w twoim brakuje dwukropka) została przesłana 8 miesięcy wcześniej i ma uzasadnione głosy negatywne. Działa to przez większość czasu. Ale nie we wszystkich przeglądarkach przez cały czas.
Auspex
3
Nie powiedziałem, że potrzebujesz średnika; Zwróciłem uwagę, że to wszystko różniło się od twojej odpowiedzi i znacznie starszej. Fakt, że teraz prosisz mnie o wskazanie, które przeglądarki go nie obsługują (nigdy nie powiedziałem, że takie istnieją, wskazałem tylko, że nie zawsze będzie działać), dowodzi, że nadal nie przeczytałeś całej strony .
Auspex
2
Zwykle nie badam głosów negatywnych, z wyjątkiem tego, że nie wiedziałem, że ludzie głosowali w dół poprawny kod. Technicznie rzecz biorąc, średnik jest obcy, więc się myli. Powiedziałeś, że „w twoim brakuje średnika”, co oznacza, że ​​jest potrzebny, co jest złe. Mówisz, że „nie zawsze będzie działać”, ale nie możesz wskazać jednego przypadku lub przeglądarki, w której nie będzie działać? To jest logika dźwięku? To poprawny kod. Więc jeśli nie potrafisz wskazać przypadku, w którym to nie zadziała, nie masz w ogóle sensu.
Danial
Jak to nie ma więcej głosów pozytywnych? Jest znacznie bardziej zwięzły w porównaniu do innych przykładów.
Sal Alturaigi
Prawdopodobnie dlatego, że tytuł nie pasuje do tego, o co pytał facet.
Danial
6

Wszystkie twoje odpowiedzi dały coś do pracy.

WRESZCIE, to zadziałało dla mnie: (jeśli nie wybierzesz przynajmniej jednego pola wyboru, to ostrzega i pozostaje na tej samej stronie)

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <form name="helloForm" action="HelloWorld" method="GET"  onsubmit="valthisform();">
            <br>
            <br><b> MY LIKES </b>
            <br>
            First Name: <input type="text" name="first_name" required>
            <br />
            Last Name: <input type="text" name="last_name"  required />
            <br>
            <input type="radio" name="modifyValues" value="uppercase" required="required">Convert to uppercase <br>
            <input type="radio" name="modifyValues" value="lowercase" required="required">Convert to lowercase <br>
            <input type="radio" name="modifyValues" value="asis"      required="required" checked="checked">Do not convert <br>
            <br>
            <input type="checkbox" name="c1" value="maths"     /> Maths
            <input type="checkbox" name="c1" value="physics"   /> Physics
            <input type="checkbox" name="c1" value="chemistry" /> Chemistry
            <br>

            <button onclick="submit">Submit</button>

            <!-- input type="submit" value="submit" / -->
            <script>
                <!---
                function valthisform() {
                    var checkboxs=document.getElementsByName("c1");
                    var okay=false;
                    for(var i=0,l=checkboxs.length;i<l;i++) {
                        if(checkboxs[i].checked) {
                            okay=true;
                            break;
                        }
                    }
                    if (!okay) { 
                        alert("Please check a checkbox");
                        event.preventDefault();
                    } else {
                    }
                }
                -->
            </script>
        </form>
    </body>
</html>
Gdba
źródło
Pracował również dla mnie.
chetan
4

Bazując na odpowiedzi @Vikram Pudi, możemy to zrobić również z czystym Javascriptem

<form onsubmit="submitForm(event)">
    <input type="text">
    <input type="submit">
</form>

<script type="text/javascript">

    function submitForm(event){
        event.preventDefault();


    }
</script>
Phan Van Linh
źródło
3

Zalecałbym nie używać onsubmiti zamiast tego dołączać zdarzenia w skrypcie.

var submit = document.getElementById("submitButtonId");
if (submit.addEventListener) {
  submit.addEventListener("click", returnToPreviousPage);
} else {
  submit.attachEvent("onclick", returnToPreviousPage);
}

Następnie użyj preventDefault()(lub w returnValue = falseprzypadku starszych przeglądarek).

function returnToPreviousPage (e) {
  e = e || window.event;
  // validation code

  // if invalid
  if (e.preventDefault) {
    e.preventDefault();
  } else {
    e.returnValue = false;
  }
}
Izaak Abramowitz
źródło
Czy możesz wyjaśnić, dlaczego nie używałbyś onsubmit?
theFreedomBanana
Może to tylko preferencja, ale łatwiej mi zrozumieć funkcjonalność strony internetowej, jeśli wszystkie detektory zdarzeń są dołączone za pomocą JSzamiast HTMLatrybutów. W ten sposób nie musisz tyle przeskakiwać w przód i w tył podczas czytania cudzego kodu
Isaac Abramowitz
co jeśli ktoś naciśnie klawisz Enter na jednym z wejść zamiast klikać przycisk? ogólnie ii nadal przedstawia ...
bluejayke
1

Powiedzmy, że masz podobny formularz

<form action="membersDeleteAllData.html" method="post">
    <button type="submit" id="btnLoad" onclick="confirmAction(event);">ERASE ALL DATA</button>
</form>

Oto javascript dla funkcji confirmAction

<script type="text/javascript">
    function confirmAction(e)
    {
        var confirmation = confirm("Are you sure about this ?") ;

        if (!confirmation)
        {
            e.preventDefault() ;
            returnToPreviousPage();
        }

        return confirmation ;
    }
</script>

Ten działa w przeglądarce Firefox, Chrome, Internet Explorer (Edge), Safari itp.

Jeśli tak nie jest, daj mi znać

Mauricio Gracia Gutierrez
źródło
1
Połączenie preventDefault()i returnToPreviousPage()jest idealne i eleganckie. Przerywa normalne działanie, tak jakbyś zaprojektował dowolny łapacz wyjątków do pracy. +1.
1934286
1

Odpowiedzi Hemanta i Vikrama nie działały dla mnie wprost w Chrome. Event.preventDefault (); skrypt uniemożliwił przesłanie strony bez względu na to, czy sprawdzanie poprawności zakończyło się pomyślnie. Zamiast tego musiałem przenieść event.preventDefault (); do instrukcji if w następujący sposób:

    if(check if your conditions are not satisfying) 
    { 
    event.preventDefault();
    alert("validation failed false");
    returnToPreviousPage();
    return false;
    }
    alert("validations passed");
    return true;
    }

Dzięki Hemantowi i Vikramowi za postawienie mnie na właściwej drodze.

Jesperai
źródło
Pracowałem też dla mnie. Dzięki.
ivbtar
1

Np. Jeśli masz przycisk w formularzu, aby zatrzymać jego propagację, po prostu napisz event.preventDefault (); w funkcji wywoływanej po kliknięciu przycisku Prześlij lub Enter.

Dheeraj Nalawade
źródło
0

Po prostu zrób to ....

<form>
<!-- Your Input Elements -->
</form>

i oto twoja JQuery

$(document).on('submit', 'form', function(e){
    e.preventDefault();
    //your code goes here
    //100% works
    return;
});
Matee Gojra
źródło
1
używałeś jquery tutaj?
Selva Ganapathi