Jak przesłać formularz, klikając link w JavaScript?

Formularz HTML można łatwo przesłać, klikając dowolny element HTML za pomocą JavaScript. Element formularza ma składać() Metoda i wywołanie tej metody za pomocą zewnętrznego wywołania przesłania formularza.

Ten artykuł skupia się na przesłaniu formularza na naciśnięciu linku. Aby to zaprezentować, zostanie utworzony formularz, który przyjmie szczegóły rejestracji od użytkownika, a po przesłaniu formularza po prostu wydrukuje nazwę użytkownika na konsolę.

Krok 1: Skonfiguruj elementy HTML

Utwórz nowy dokument HTML i w tym dokumencie utwórz formularz z konkretnym identyfikatorem i w tym formularzu, utwórz pole wejściowe dla nazwy użytkownika i hasła. Następnie, zamiast przycisku przesyłania, utwórz nowy link za pomocą oznacz i użyj atrybutu onClick i ustaw go równie linkpress () funkcjonować:

Proszę wpisać swoją nazwę użytkownika

Wpisz swoje hasło

Link do przesłania

W tym momencie ten dokument HTML tworzy następującą stronę internetową:

Nasza strona internetowa zawiera dwa pola wejściowe i link, który ma ustawiony atrybut onClick ().

Krok 2: Wykonanie formularza „Prześlij” na prasie Link

Każdy element formularza w HTML zawiera metodę Zwrot (). Aby przesłać formularz, należy go odwoływać w JavaScript, a następnie metodę Zwrot () należy wywołać za pomocą tego odniesienia. W pliku skryptu utwórz funkcję linkpress () i dodaj funkcjonalność za pomocą następujących wierszy:

funkcja linkpress ()
Form = dokument.getElementById („Form”);
formularz.składać();

Pierwszy wiersz otrzymuje odniesienie do naszego znacznika formularza i przechowuje ją wewnątrz zmiennej ”formularz". Drugi wiersz korzysta z tego odniesienia, a następnie wywołuje Zwrot () formularza. Uruchomienie tego dokumentu HTML daje następujący wynik:

Naciśnięcie linku przesyła formularz, ale ponieważ nie ma pliku zaplecza podłączonego do odbierania formularza, dlatego po prostu resetuje pole.

Krok 3: Wyprowadź „nazwę użytkownika” po przesłaniu formularza

Chcesz dodać funkcję gotowy() po całkowitym załadowaniu strony internetowej; Dlatego dodaj własność „Onload”Na tagu:

A następnie w pliku skryptu dodaj następujące wiersze:

funkcja gotowa ()
Form = dokument.getElementById („Form”);
formularz.addEventListener („Zwrot”, funkcja (event)
wydarzenie.PreventDefault ();
Nazwa = dokument.getElementById („Nazwa”).wartość;
alert („powitalne” + nazwa);
);

Gdy dokument HTML jest całkowicie załadowany:

• Do elementu formularza jest dodawany do elementu formularza za pomocą jego odniesienia.
• Ten słuchacz wydarzenia słucha wydarzenia Przesyłania
• Po przesłaniu zapobiega domyślne zachowanie formularza (zatrzymaj przekierowanie).
• Na koniec wita użytkownika za pomocą nazwy użytkownika.

Jeśli strona internetowa jest teraz załadowana, daje następujące dane wyjściowe:

Jak widać, formularz został przesłany i zapobiegając domyślnym zachowaniu, byliśmy w stanie uniknąć potrzeby zarządzania danymi z pól.

Wniosek

Naprawdę łatwo jest przesłać formularz, klikając link za pomocą JavaScript. Element formularza dokumentu HTML ma tę metodę wywoływaną składać(). Aby przesłać formularz, musisz tylko wykonać wyraźne wywołanie tej metody, którą zrobiliśmy w tym artykule.