Formularze - Javascript

Question

Witam :) Mam pytanko.

Dajmy na to, że robię jakiś tam mały programik webowy.

I potrzebuję aby użytkownik wpisał dane wejściowe w polach input to w jaki sposób wysłać ten formularz aby wyświetliły się dane wyjściowe?

Trzeba po prostu zrobić formularz i przechwycić dane z pól input, zapobiec faktycznemu wysłaniu formularza tak aby strona się nie odświeżała?

Coś tego typu:

	<script type="text/javascript">
	
	document.getElementById('formularz').addEventListener('submit', function(event) {
	event.preventDefault(); // zapobiegaj rzeczywistemu wysłaniu
	}, false);
	
	function main()
	{
		var liczba1 = document.getElementById("pierwsza");
		var liczba2 = document.getElementById("druga");
		var liczba3 = document.getElementById("trzecia");
		var liczba4 = document.getElementById("czwarta");
		var suma;
		
		suma = Number(liczba1.value) + Number(liczba2.value) + Number(liczba3.value) + Number(liczba4.value);
		document.getElementById("result").innerHTML = suma; 
		if (isNaN (Number(liczba1.value)) || isNaN(Number(liczba2.value)) || isNaN(Number(liczba3.value)) || isNaN(Number(liczba4.value))) { document.getElementById("result").innerHTML = "Wpisałeś błędne dane."; }
	}
		
	</script>

Czy są jakieś inne sposoby, łatwiejsze i wygodniejsze? :)

Answer 1

To co napisałeś raczej nie trzyma się kupy. Do EventListener powinieneś przekazać swoją funkcję main a preventDefault() umieścić wewnątrz main().

Comments

Po co? Zadeklarował funkcję w locie.

---

Nie sprawdzałem czy ten kod działa. Czyli EventListener się domyśli, żeby wywołać main() ?

---

Proszę tutaj livedemo jak to działa:

http://mateuszwagner.pl/dodawanie.html

---

W ogóle jaki main? Nie pomyliłeś języków przypadkiem? Wewnątrz eventListenera jest handler, który obsługuje zdarzenie, po prostu.

---

document.getElementById('formularz').addEventListener('submit', function(event) {
event.preventDefault(); // zapobiegaj rzeczywistemu wysłaniu
}, false);
 
function main()
{
    var liczba1 = document.getElementById("pierwsza");
    var liczba2 = document.getElementById("druga");
    var liczba3 = document.getElementById("trzecia");
    var liczba4 = document.getElementById("czwarta");
    var suma;
     
    suma = Number(liczba1.value) + Number(liczba2.value) + Number(liczba3.value) + Number(liczba4.value);
    document.getElementById("result").innerHTML = suma; 
    if (isNaN (Number(liczba1.value)) || isNaN(Number(liczba2.value)) || isNaN(Number(liczba3.value)) || isNaN(Number(liczba4.value))) { document.getElementById("result").innerHTML = "Wpisałeś błędne dane."; }
}   

O ten main chodzi.

Kolega zablokował defaultową akcje submita, a funkcje main przypiął atrybutem onClick - trochę tak dziwnie.

---

Chodziło mi o coś takiego:

costam.addEventListener("submit", main, false)

Z kodu który podał na początku nie domyśliłem się jak to miał rozwiązane.

---

Nazwałem sobie po prostu funkcję jako main.

Ten kod to mój całkowicie pierwszy kod w JS, uczę się dopiero :)

Answer 2

Służy ku temu klasa FormData, złapać dane z formularza możesz np. w ten sposób.