JavaScript: formularze
Opublikowano sob 19 grudnia 2020 w javascript • 2 min read
Formularz
"Łapanie" formularza na 2 sposoby = poprzez odwołanie się do forms lub poprzez "klasyczne" selektory
const firstForm1 = document.forms[0]
const firstForm2 = document.querySelector("form")
Właściwości formularza (wybrane)
| właściwość formularza | funkcja | Przykład zastosowania |
|---|---|---|
| formularz.elements | "zwraca kolekcję kontrolek zawartych" w formularzu | firstForm1.elements |
| formularz.length | "zwraca ilość kontrolek" w formularzu | |
| formularz.name | "ciąg z nazwą bieżącego elementu" formularza | |
| formularz.action | "pobiera/ustawia akcję dla" formularza | |
| formularz.target | "pobiera/ustawia okno docelowe akcji formularza" | |
| formularz.method | "Pobiera/ustawia metodę HTTP używaną do wysłania formularza." |
Pełna lista właściwości formularza i źródło: HTMLFormElement/developer.mozilla.org - właściwości formularza
Metody formularza
| metoda formularza | funkcja | Przykład zastosowania |
|---|---|---|
| formularz.submit() | "wysyła formularz" | |
| formularz.reset() | "przywraca formularz do jego stanu początkowego" | |
| formularz.requestSubmit() | Wysyła żądanie aby formularz został zatwierdzony przez konkretny przycisk oraz, do którego jest przypisana konkretna konfiguracja | |
| Walidacja | Walidacja | Walidacja |
| formularz.checkValidity() | Zwraca true jeśli walidacja elementów formularza przebiegła poprawnie | |
| formularz.raportValidity() | Zwraca true jeśli walidacja elementów formularza przebiegła poprawnie | |
| formularz.setCustomValidity() | Zwraca informację związaną z walidacją inputu o dowolnej wskazanej treści |
Zdarzenia (events)
| metoda formularza | funkcja |
|---|---|
| formdata | wydarzenie formdata jest wywołany kiedy lista reprezentująca dane formularza są stworzone |
| reset | wydarzenie reset jest wywołany gdy formularz jest "zerowany"/resetowany |
| submit | wydarzenie submit jest wywołany gdy formularz jest wysłany |
Przykład zastosowania formdata
// złapanie referencji do formularza
const formElem = document.querySelector('form');
// zgłoszenie obsługi zdarzeń
formElem.addEventListener('submit', (e) => {
// prevent default na wysłaniu
e.preventDefault();
// tworzy obiekt FormData, który odpala event formdata
new FormData(formElem);
});
// formdata handler to retrieve data
formElem.onformdata = (e) => {
console.log('formdata fired');
// Złapanie/wydobycie danych formularza z obiektu wydarzenia
let data = e.formData;
for (var value of data.values()) {
console.log(value);
}
// wysyłanie danych przez XHR
var request = new XMLHttpRequest();
request.open("POST", "/formHandler");
request.send(data);
};
źródło przykładu: GlobalEventHandlers.onformdata
Pola formularza
Główne zdarzenia - change, focus/blur, keypress/keyup/keydown, input (gdy wartość pola zostaje zmienione)
Inputy
źródło lub inspiracja poniższych przykładów kursjs.pl - formularze
Text
Wydobycie informacji poprzez odwołanie się do właściwości value inputu
const inputEmail = document.querySelector("#userEmail");
input.addEventListener("input", e => {
const val = input.value;
const reg = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
// jeśli poprawnie dodaj klasę
if (!reg.test(val)) {
input.classList.add("field-error");
} else {
// jeśli niepoprawnie dodaj klasę
input.classList.remove("field-error");
}
});
See the Pen JS_formularz_tekst/email by Mikołaj Kostyrko (@mkostyrko) on CodePen.
Radiobox i Checkbox
checked - sprawdza czy jest zaznaczone polecenia
change - nasłuchuje na zmiany w formularzu typu (radiobox/checkbox)
for (const radio of exampleRadio) {
radio.addEventListener("change", e => {
for (const radio of exampleRadio) {
if (radio.checked) {
console.log(radio.value)
}
}
});
}
See the Pen JS_formularz_radiobox/checkbox by Mikołaj Kostyrko (@mkostyrko) on CodePen.
Select
Właściwości elementu formularza typu select
select.value - wartość pola selected
select.options - zbiór elementów opcji
select.selectedIndex - indeks wybranej opcji
select.options[selectedIndex] - indeks wybranej opcji z formularza select
option.selected - wydarzenie związane z elementem option wewnątrz elementu select - zwraca wartość logiczną - wybrany lub nie (true/false)
Przy tworzeniu opcji formularza select istnieje możliwość wykorzystania konstruktora Option(text, value, defaultSelected, selected)
Zdarzenia dla elementu select: focus, blur, change, keydown, keyup, keypress
const option1 = new Option("Tekst", 102);
See the Pen JS_select_bootstrap by Mikołaj Kostyrko (@mkostyrko) on CodePen.
Color
Reaguje na zdarzenie change
input.addEventListener("change", e => {
console.log(input.value)
});
Range
Reaguje na zdarzenia typu change(gdy zmienia się wartość) oraz input(w czasie zmiany wartości)
input.addEventListener("change"/"input", e => {
console.log(input.value)
});
See the Pen JS_fromularz_zasieg by Mikołaj Kostyrko (@mkostyrko) on CodePen.
Źródła: