formularz bez żadnej akcji i jeśli enter nie przeładowuje strony

94

Szukam najładniejszego sposobu na stworzenie formularza HTML, który nie ma przycisku przesyłania. To samo w sobie jest dość łatwe, ale muszę również zatrzymać ponowne ładowanie formularza, gdy wykonywane są czynności podobne do przesyłania (na przykład trafienie Enterw pole tekstowe).

javascript html forms

— Matt Roberts
źródło

Czy chcesz, aby nigdy się nie poddało?

— UpTheCreek

Jeśli masz tylko <form> z pojedynczym <input>, które jest polem tekstowym, którego nie należy przesyłać po naciśnięciu klawisza Enter, prawda?

— Zack The Human

Chcę, żeby podporządkował się innym warunkom (w rzeczywistości naciśnięciu określonego przycisku). Problem polega na tym, że nie udało mi się uzyskać zachowania „wprowadź w polu tekstowym” polegającego na wysyłaniu / uzyskiwaniu dostępu do tego samego adresu URL. Tak więc mój starannie stworzony formularz, w którym musisz zrobić X, Y i Z, aby go przesłać, może zostać błędnie przesłany przez użytkownika naciskając Enter.

— Matt Roberts

44

Dodaj procedurę obsługi onsubmit do formularza (za pomocą zwykłego js lub jquery $ (). Submit (fn)) i zwróć wartość false, chyba że zostaną spełnione określone warunki.

Chyba że nigdy nie chcesz, aby formularz był przesyłany - w takim przypadku dlaczego nie po prostu pominąć atrybutu „action” w elemencie formularza?

— K Prime
źródło

151

Formularz bez actionatrybutu nie jest formularzem, zgodnie ze standardami - i faktycznie powoduje przeładowanie strony w niektórych przeglądarkach. Zauważyłem, że to action="javascript:void(0);"działa dobrze.

— Dutchie432

Odpowiedź Holendrów działa idealnie. Firefox właśnie odświeżył stronę.

— IAmGroot

1

@ Dutchie432 powinien zamienić to w odpowiedź zamiast komentarza. Wtedy dotarłby na szczyt, do którego należy. Ewentualnie KPrime mógł skorygować swoją odpowiedź, ponieważ pominięcie akcji mi nie wyszło ...

— sage

211

Będziesz chciał dołączyć action="javascript:void(0);"do swojego formularza, aby zapobiec ponownemu ładowaniu strony i zachować standard HTML.

— Dutchie432
źródło

4

Właśnie spędziłem 2 dni próbując powstrzymać domyślną akcję przycisku wysyłania po naciśnięciu klawisza Enter, ponieważ chociaż akcja miała miejsce, strona zakończyła się przeładowaniem (Firefox). Dodanie javascript void jako akcji w formularzu naprawiło ten problem. Dziękuję za to.

— Tony Payne,

dzięki za tę dodatkową odpowiedź. to nadal działa - ale czy jest to „najnowocześniejsze” rozwiązanie w 2016 roku?

— low_rents

1

@low_rents Ciągle z niego korzystam i osobiście nie znalazłem lepszego rozwiązania.

— Dutchie432

1

Dziękuję za precyzyjne i świetne rozwiązanie pozwalające rozwiązać przeładowanie strony przy wciśnięciu klawisza enter :) Najlepsze rozwiązanie.

— Imran Rafiq Raczej

9

Po prostu dodaj to wydarzenie do swojego pola tekstowego. Uniemożliwi to przesłanie po naciśnięciu klawisza Enter, a Ty możesz dodać przycisk przesyłania lub formularz wywoławczy.submit () zgodnie z wymaganiami:

onKeyPress="if (event.which == 13) return false;"

Na przykład:

<input id="txt" type="text" onKeyPress="if (event.which == 13) return false;"></input>

— GenericMeatUnit
źródło

1

Dziękuję za to. Obawiam się, że jasność Twojej odpowiedzi wyjaśniła mi poprawność wcześniejszej odpowiedzi, więc nie otrzymujesz odpowiedzi zaakceptowanej, ale otrzymujesz moją wdzięczność i pozytywną opinię!

— Matt Roberts,

2

Dziękuję Ci. Miło, że mogłem pomóc. I tak nigdy nie byłem w centrum uwagi. ;)

— GenericMeatUnit

5

Gdy wciśniesz enter w formularzu, naturalnym zachowaniem formularza jest wysłanie, aby zatrzymać to zachowanie, które nie jest naturalne, musisz uniemożliwić mu wysłanie (zachowanie domyślne), za pomocą jquery:

$("#yourFormId").on("submit",function(event){event.preventDefault()})

— jsDevia
źródło

4

pomysł:

<form method="POST" action="javascript:void(0);" onSubmit="CheckPassword()">
    <input id="pwset" type="text" size="20" name='pwuser'><br><br>
    <button type="button" onclick="CheckPassword()">Next</button>
</form>

i

<script type="text/javascript">
    $("#pwset").focus();
    function CheckPassword()
    {
        inputtxt = $("#pwset").val();
        //and now your code
        $("#div1").load("next.php #div2");
        return false;
    }
</script>

— Tom szlachcic
źródło

1

Dwa sposoby rozwiązania:

wartością akcji formularza jest „javascript: void (0);”.
dodaj detektor zdarzeń naciśnięcia klawisza dla formularza, aby zapobiec przesyłaniu.

— rachunek
źródło

Odsłuchiwanie zdarzenia naciśnięcia klawisza (np. Klawisza Enter) może spowodować kłopoty z textareas i prawdopodobnie wybranie autouzupełniania lub menu rozwijanych, a telefon komórkowy może być kolejnym źródłem problemów.

— luckydonald

0

Pierwsza odpowiedź to najlepsze rozwiązanie:

Dodaj procedurę obsługi onsubmit do formularza (za pomocą zwykłego js lub jquery $ (). Submit (fn)) i zwróć wartość false, chyba że zostaną spełnione określone warunki.

Bardziej szczegółowo z jQuery:

$('#your-form-id').submit(function(){return false;});

Chyba że nigdy nie chcesz, aby formularz był przesyłany - w takim przypadku dlaczego nie po prostu pominąć atrybutu „action” w elemencie formularza?

Pisanie rozszerzeń Chrome to przykład, w którym możesz mieć formularz do wprowadzania danych przez użytkownika, ale nie chcesz, aby był przesyłany. Jeśli użyjesz action = "javascript: void (0);", kod prawdopodobnie będzie działał, ale skończysz z tym problemem, w którym pojawi się błąd związany z uruchamianiem wbudowanego JavaScript.

Jeśli całkowicie pominiesz tę czynność, formularz zostanie ponownie załadowany, co jest również niepożądane w niektórych przypadkach podczas pisania rozszerzenia Chrome. Lub jeśli masz stronę internetową z jakimś wbudowanym kalkulatorem, w którym użytkownik wprowadzałby pewne dane wejściowe i klikał „Oblicz” lub coś w tym rodzaju.

— skelliam
źródło