Jak przesłać formularz za pomocą JavaScript

JavaScript to język programowania na wysokim poziomie, który staje się popularny z dnia na dzień. Daje naszym stronom internetowym i aplikacjom internetowym możliwość wykonywania określonych działań i tworzenia ich interaktywnych. JavaScript oferuje formularze dla programistów stron internetowych, które pomagają programistom w gromadzeniu danych od użytkowników i przechowywaniu tych danych w bazie danych. Podczas pracy z wieloma aplikacjami i stronami internetowymi przesyłanie formularza jest krytycznym zjawiskiem.

W tym poście przejdziemy do szczegółowego przesłania formularza za pomocą JavaScript, ale najpierw zobaczymy, jak utworzyć formularz HTML.

Tworzenie formularzy HTML

Formularz HTML można utworzyć za pomocą znacznika oferowanego przez sam HTML i wymaga dwóch atrybutów:

• Pierwszym z nich jest „działanie” zawierające adres URL (który obsługuje przesłanie procesu formularza).
• Drugim atrybutem jest „metoda”, która ma metodę HTTP.

Metoda HTTP może być różnych typów, a dwa najczęściej używane są:

• Zdobądź (używane do uzyskania danych z serwera)
• Post (używany do zapisywania danych na serwerze)

Jednak w tym poście nie będziemy używać tych dwóch atrybutów, ponieważ nie pracujemy z serwerem.

Napiszmy teraz kod HTML do tworzenia formularzy:

Składać

W powyższym kodzie stworzyliśmy formularz i daliśmy ID atrybut formy, której znaczenie zobaczymy za jakiś czas. Następnie zdefiniowaliśmy dwa pola wejściowe, a następnie zdefiniowaliśmy przycisk, który ma rodzaj składać. W końcu umieściliśmy scenariusz tag i odwołał się do nazwy pliku „kod.JS„To będzie zawierało nasz kod JavaScript.

Dostęp do formularza i pobieraj wartości z formularza

Teraz, gdy skończymy z tworzeniem naszego formularza, uzyskajmy dostęp do tego formularza z JavaScript, a następnie odzyskaj wartości nazwa użytkownika I hasło które są obecne wewnątrz znacznika formularza. Aby uzyskać dostęp do formularza, użyjemy ID Atrybut wspomniany wcześniej za pomocą następującego kodu:

var myform = dokument.getElementById („myform”);

W ten sam sposób możemy również uzyskać wartości z pól wejściowych za pomocą ID atrybut podany w formie HTML. Jedyną różnicą jest to, że podamy wartość na końcu GetElementById abyśmy mogli odzyskać wartość z pola wejściowego, a nie sam element:

var Username = Dokument.getElementById („nazwa użytkownika”).wartość;
var hasło = dokument.getElementById („hasło”).wartość;

Prześlij formularz i potwierdź dane

Aby przesłać formularz, użyjemy Słuchacz wydarzenia który słucha określonego słuchacza w sposób ciągły. Wydarzenie jest po prostu interakcją HTML i JavaScript uruchamianego przez użytkownika lub przeglądarki, gdy użytkownik manipuluje stronę, a to wydarzenie jest obsługiwane przez słuchacza zdarzenia.

var myform = dokument.getElementById („myform”);
// Listener zdarzeń, który słucha wydarzenia przesyłania
Myform.addEventListener („Zwrot”, funkcja (e)
mi.PreventDefault ();
// pobieraj wartości
var Username = Dokument.getElementById („nazwa użytkownika”).wartość;
var hasło = dokument.getElementById („hasło”).wartość;
// Sprawdź pola nazwy użytkownika i hasła
if (nazwa użytkownika == "|| hasło ==")
alert („Proszę wypełnić wszystkie wymagane pola”);

w przeciwnym razie
Alert („Zgłoszenie formularza udane”);

)

W powyższym kodzie najpierw otrzymujemy odniesienie do formularza za pomocą ID atrybut, a następnie zainicjuj słuchacza zdarzeń "składać" w tej formie. Funkcja określona w zdarzeniu, gdy słuchacz zostanie wywołany po kliknięciu użytkownika przycisku Prześlij.

Wewnątrz funkcji przeprowadziliśmy naszą walidację, to znaczy, jeśli pola wejściowe nazwy użytkownika lub hasła są puste, to zobaczymy wiadomość w polu ostrzeżenia, mówiąc Proszę wypełnić wszystkie wymagane pola W przeciwnym razie otrzymamy wiadomość Zgłoszenie formularza pomyślne.

Sprawdźmy najpierw, klikając przycisk Prześlij, pozostawiając puste dwa pola wejściowe:

Wypełnijmy teraz dwa pola i zobacz wyjście:

Wniosek

Formularze są bardzo pomocne w gromadzeniu danych od użytkowników, a następnie manipulowaniu lub graniem tymi danymi w JavaScript. W tym poście przyjęliśmy pomoc od HTML znacznik, aby zainicjować formularz, a następnie zdefiniować dwa pola wejściowe i przycisk. Następnie uzyskaliśmy dostęp do elementu formularza wewnątrz pliku JavaScript, a następnie odzyskaliśmy wartości pól wejściowych formularza za pomocą ID atrybut.

Ostatecznie odpowiedzieliśmy na pytanie, jak przesłać formularz za pomocą JavaScript, inicjując słuchacz zdarzenia, który będzie słuchać zdarzenia przesyłania, a gdy użytkownik kliknie przycisk Przesyłania, to wydarzenie zostanie zwolnione. Zweryfikowaliśmy również nasze pola wejściowe wewnątrz funkcji słuchacza zdarzenia.