Zadanie "baza teleadresowa" – pomoc przy realizacji zadania

0

Witam, prosiłbym o pomocy przy realizacji zadania "baza teleadresowa"

Wymagana jest następująca funkcjonalność:

wprowadzanie następujących danych:

  • imię
  • nazwisko
  • data urodzenia
  • telefon (dom, praca, komórka)
  • email

wprowadzane dane mają być wstępnie sprawdzane pod kątem poprawności
data ma być wprowadzana z użyciem wygodnej kontrolki
aplikacja ma wyświetlać wszystkie poprzednio wprowadzone rekordy

Czy byłby ktoś w stanie taki formularz wykonać? Chciałbym przeglądnąć kod krok po kroku, gdyż mam problem jak wyświetlić wpisywane dane w formularzu tak, żeby po kliknięciu buttona nie "odświeżało" mi całej strony od nowa.
Pozdrawiam

1

Prosisz o pomoc, czy chcesz, żeby ktoś to zrobił za Ciebie?

Jeśli szukasz kogoś, kto to zrobi, to do tego jest odpowiednia kategoria - https://4programmers.net/Forum/Og%C5%82oszenia_drobne

Jeśli natomiast szukasz pomocy, to napisz konkretniej w czym masz problem, pokaż co już zrobiłeś i w którym momencie utknąłeś. Z tego co można aktualnie zrozumieć z Twojego postao wynika, że za bardzo nie masz pomysłu jak to zrobisz i czekasz na gotowiec.

0

Na razie stworzyłem formularz i sprawdzenie czy uzupełnione pola nie są puste. Ale mam problem z wyświetleniem wpisanych wartości w formularzu, żeby po każdorazowym kliknięciu przycisku "wprowadź" dopisywały się jeden pod drugim w formularzu.

<!DOCTYPE HTML>
<html lang="pl">

<head>
	<meta charset="utf-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
	<title>BAZA TELEADRESOWA</title>
	<meta name="description" content="baza teleadresowa"/>
	<meta name="keywords" content="baza, telefon, email"/>


		<style>
			body 
			{
			background-color: #3e3e3e;
			color: #e3e3e3;
			}
		</style>
		
		<script type="text/javascript">
			
			function sprawdz(form)
			{
				if (form.Imie.value == "")
					alert ("Nie wpisano imienia")
				else if (form.Nazwisko.value == "")
					alert ("Nie wpisano nazwiska")
				else if (form.Data.value =="")
					alert ("Nie podano daty urodzenia")
				else if (form.telefon.value =="")
					alert ("Nie podano numeru telefonu")
				else if (form.Email.value == "" || form.Email.value.indexOf('@', 0)==-1)
					alert ("Niepoprawny adres email");
			}
				
		</script>
		
	</head>

	<body>

		<form name="form" >
		  Imie : <input type="text" name="Imie">
		  <br><br>
		  Nazwisko : <input type="text" name="Nazwisko">
		  <br><br>
		  Data urodzenia : <input type="int" name="Data">
		  <br><br>
		  Nr telefonu : <input type="int" name="telefon">
		  <br><br>
		  Email : <input type="text" name="Email">
		  <br><br>
		   <input type="submit" value="Wprowadź" onclick="sprawdz(this.form)">
		</form>

	</body>

</html>
1

  1. wrzuciłem to na jsfiddle - tak będzie łatwiej. Oto adres - https://jsfiddle.net/q0efsjp8/. Potem dalsze zmiany rób tam - w ten sposób od razu każdy zainteresowany będzie mógł zobaczyć jak to działa (oraz wprowadzić ewentualne zmiany).

  2. nie rozumiem za bardzo, o co Ci chodzi. Zobacz, co masz podane przy submit - jedynie funkcję sprawdz(this.form). A co ona robi? Sprawdza tylko poprawność wprowadzonych w polach formularza danych. Więc gdzie i dlaczego wprowadzone dane miałyby się wyświetlać? Obecnie działa to tak, że po wciśnięciu przycisku "wprowadź" następuje sprawdzenie tego, co użytkownik wpisał w formularzu. Jeśli wykryje jakieś błędy (puste pole albo mail niepoprawny) to wywala komunikat ze stosowną informacją. A potem (niezależnie, czy były błędy, czy nie) nic się nie dzieje, bo niczego dalej nie przewidziałeś ;)

dopisywały się jeden pod drugim w formularzu

Chyba mieszasz pojęcia. Formularz to są te pola, w których się wpisuje wartości. Po wciśnięciu "wprowadź" (albo jakiegokolwiek innego przycisku służącego do zapisu formularza) treści wpisane przez użytkownika są przesyłane (gdzie - to kwestia do ustalenia. W obecnej postaci - nigdzie ;) ), a pola są czyszczone i przygotowane do wprowadzenia kolejnych danych.
Napisz gdzie i jak chcesz, żeby te informacje się dodawały / wyświetlały.

0

Dzięki wielkie za pomoc.
Przepraszam, że tak niejasno tłumaczę co mam na myśli ;). Potrzebuję, stworzyć funkcję, która by pola wpisane w formularzu wyświetliła/przechowywała w listboxie?/tablicy? (lub w czymś podobnym) zaraz pod formularzem bez odświeżania strony. Aby za każdym razem przy użyciu przycisku "Wprowadź" sprawdzała wpisywane wartości oraz wyświetlała te wartości pod formularzem. Być może wystarczy przechwycić same wartości wpisywane w formularzu ? I wyświetlić je poniżej?

1

No to masz zadanie (a co ... mogę pomóc, ale nie będę tego robić za Ciebie :D ). Na jsfidle dodaj pod formularzem tabelkę, do której chcesz dodawać wartości. Jak to zrobisz to zastanowimy się, co możemy dalej z tym tematem zrobić ;)

Masz też pytanie/kwestię do przemyślenia: w wersji o której piszesz, wszystko będzie się odbywać po stronie przeglądarki. Oznacza to, że po odświeżeniu strony wszystko, co tam wpisałeś przepadnie. Czy to jest pożądane zachowanie, czy chcesz te dane gdzieś zostawić "dla potomnych"? Jeśli opcja numer 2 to dochodzą jeszcze takie tematy jak PHP, SQL oraz jakiś serwer, na którym będziesz to trzymać.

0

Taka forma pomocy jest jak najbardziej odpowiednia ;).

Nie potrzebuję zapisywać informacji w bazie danych. Także jest to celowy zamiar.

1

No to daj znać, jak dodasz tabelkę i zaktualizujesz wpis na jsfiddle.

A tak nawiasem mówiąc - mam nadzieję, że wiesz, iż stosowanie <br> do formatowania treści w HTML to mocna prowizorka i naginanie zasad. Sam też tak często robię - ale to tylko gdy piszę coś "na szybko" albo na brudno. Jeśli chcesz to gdzieś puścić w świat, to wypadałoby inaczej/ładniej rozwiązać kwestię formatowania i pozycjonowania.

0

Tabelka dodana, ale problemem dla mnie jest to co miałem od początku, czyli jak użyć funkcji, żeby pobrać te dane z formularza i zapisać je w tabeli?

Domyślam się, że taka forma formatowania jest "prowizorką" ale głównie zależy mi na poprawnym działaniu. Ale później chętnie się dowiem jakiego formatowania treści w HTML używać, żeby miało to ręce i nogi ;)

1
cerrato napisał(a):

No to masz zadanie (a co ... mogę pomóc, ale nie będę tego robić za Ciebie :D ). Na jsfidle dodaj pod formularzem tabelkę, do której chcesz dodawać wartości. Jak to zrobisz to zastanowimy się, co możemy dalej z tym tematem zrobić ;)

Masz też pytanie/kwestię do przemyślenia: w wersji o której piszesz, wszystko będzie się odbywać po stronie przeglądarki. Oznacza to, że po odświeżeniu strony wszystko, co tam wpisałeś przepadnie. Czy to jest pożądane zachowanie, czy chcesz te dane gdzieś zostawić "dla potomnych"? Jeśli opcja numer 2 to dochodzą jeszcze takie tematy jak PHP, SQL oraz jakiś serwer, na którym będziesz to trzymać.

json + localStorage
prowizorka to jest oczywiscie, ale zapisuje dane :P

1

Bądź twardy i zrób tak :-)

      function sprawdz(form) {
      	if(form.Imie.value == "" && form.Nazwisko.value == "" && form.Data.value == "" && form.telefon.value == "" && form.Email.value == "" || form.Email.value.indexOf('@', 0) == -1) {
      	  alert("Nie wszystkie pola zostaly uzupelnione.")
        }
      }
2

No to na zasadzie dawania wędki, a nie ryby - rzuć okiem na https://jsfiddle.net/nkecpfLd/ :D

Na razie dodaje dane statyczne - czyli za każdym razem to samo, na sztywno wpisane w skrypt. Ale myślę, że sobie poradzisz z dostosowaniem do swoich potrzeb.

Zwróć uwagę, że zamieniłem typ przycisku - był "submit" a zrobiłem "button". Submit po wciśnięciu odświeża/przeładowuje stronę, więc efekt był taki, że treść tabelki się dodawała, a następnie zaraz strona się przeładowywała i cała treść tabeli się gubiła. Zresztą możesz testowo sobie zrobić znowu "submita" i zobaczysz, co się dzieje.

Jeszcze masz do dopracowania połączenie dwóch funkcji - Twojej, która sprawdzała poprawność wprowadzanych danych oraz mojej, która wypełnia treścią tabelkę.

Kolejna rzecz, którą warto byłoby zrobić - zamiast 5 razy wpisywać te same polecenia, lepiej zrobić jakąś funkcję, która zajmie się dodaniem treści komórki.

2

A wracajac do sedna: robisz nowy tr

let row =  document.createElement('tr');

wypelniasz odpowiednio komorki, np

let cell = document.createElement('td');
cell.innerHTML = name;

wpychasz komorke do tr

row.appendChild(cell);

i jak juz wypelnisz caly tr to wrzucasz go do tabelki

tabelka.appendChild(row); // tylko musisz ta tabelke najpierw zlapac do zmiennej
1

Można to też zrobić inaczej - tak, jak podałem w jsfiddle :D


var tabelka = document.getElementById('tabeleczka').getElementsByTagName('tbody')[0];
var nowaLinia = tabelka.insertRow(tabelka.rows.length);
var komorka = nowaLinia.insertCell(0);
var tresc = document.createTextNode('Stefan');
komorka.appendChild(tresc);
0

https://jsfiddle.net/nkecpfLd/13/

Jeszcze pytania:

  1. Czy do zdarzenia onclick mogę dopisać dwie funkcje? Czy raczej nie powinno się tak tego stosować?
  2. Jak zatrzymać wprowadzanie danych do tabeli w sytuacji, gdy któryś z danych nie został wprowadzony, (pomimo wyświetlenia alertu, dane wpisują się do tabeli).
  3. Czy można zaimplementować ładną kontrolkę do wybierania daty w formularzu?
1
  1. stosuj eventListenery
  2. procedure do wypisywania wykonuj tylko wtedy kieddy walidacja byla pomyslna
  3. <input type="date"> 
document.getElementById('foo').addEventListener('click', function() {
    bar();
    spam();
});

PS: brakuje Ci srednikow, znajdz gdzie

1

Czy do zdarzenia onclick mogę dopisać dwie funkcje? Czy raczej nie powinno się tak tego stosować?

Bez nadmiernego kombinowania i utrudniania sobie życia - dajesz jedną funkcję, a ona niech robi po kolei to, co jest potrzebne. Jeśli widać, że pewne rzeczy są powtarzalne, albo z innego powodu warto je wydzielić do osobnej funkcji - tak robisz.

Przykład - jak pisałem parę postów wcześniej, dodawanie wpisów do tabeli zrobiłem w postaci powtórzenia 3 linijek, które wpis dodają, a przy każdym powtórzeniu tylko zmieniałem dodawaną treść. Zrobiłem to specjalnie, żebyś miał zadanie do poprawienia :D

Inny przykład czegoś, co warto wydzielić do osobnej funkcji - sprawdzanie poprawności danych (czyli odpowiedź na następne pytanie).

W każdym razie - to, co zrobiłeś jest raczej nieładne (w sensie - dodanie dwóch funkcji w obsłudze zdarzenia onclick). Chociażby dlatego, że - jak sam zauważyłeś - druga funkcja zostanie wywołana, niezależnie od tego, co stwierdzi pierwsza

Jak zatrzymać wprowadzanie danych do tabeli w sytuacji, gdy któryś z danych nie został wprowadzony, (pomimo wyświetlenia alertu, dane wpisują się do tabeli).

W obecnej postaci raczej to nie będzie działać. Teraz jest tak, że wywołujesz pierwsza funkcję, ona coś robi, a następnie (niezależnie od wyniku jej działaniai) jest wywoływana druga. Zamiast tego wywołaj pierwszą funkcję, a z niej drugą.

Powinno to wyglądać mniej-więcej tak: pierwsza funkcja się odpala, następnie wywołuje drugą. Druga sprawdza, czy wprowadzone dane są OK i zwraca jakiś wynik. Jeśli wynik jest pozytywny, to pierwsza funkcja kontynuuje działanie i dodaje dane do tabelki. W przeciwnym przypadku zostaje wyświetlony błąd i pierwsza funkcja kończy swoje działanie, bez dopisywania czegokolwiek. Ważne jest, żebyś nie próbował niczego pisać w tabeli do czasu uzyskania potwierdzenia ze strony funkcji sprawdzającej, że dane są poprawne.

Odpowiadając na Twoje pytanie - trochę odwrotnie się za to zabierasz. Nie masz zatrzymywać pisania w sytuacji błędu, ale nie zaczynaj pisać, zanim się nie upewnisz, że wszystko jest OK.

Czy można zaimplementować ładną kontrolkę do wybierania daty w formularzu?

Tak, jak napisał @stivens - input type="date" . Coś mi świta, że nie wszystkie przeglądarki sobie z tym radzą, ale nie pamiętam szczegółów i nie chcę wprowadzać w błąd. Może to było w jakichś starszych wersjach - sprawdziłem na szybko i u mnie to działa... A może po prostu z wiekiem już demencja człowieka dopada, a input date jest zupełnie OK ;)

0

Dziękuję za wszelkie sugestie i uwagi.
Jednak coś robię źle, przy tworzeniu EventListener. Na początek próbowałem, żeby on wywołał dwie funkcje (tak jak pisaliście) . Wyciągnąłem button z form, nadałem mu id i dalej coś nie "hula". To wyrzuca: "Uncaught TypeError: Cannot read property 'addEventListener' of null"
https://jsfiddle.net/nkecpfLd/54/

1

Javascript ma byc na samym dole (np. przed zamknieciem </body>) zeby caly DOM najpierw sie wczytal. Ewentualnie jakas funkcja, ktora sie wywoluje dopiero po wczytaniu calego dokumentu (w jQuery to jest $(document).ready() nie wiem jak w czystym)

1

Na początek próbowałem, żeby on wywołał dwie funkcje

No zasadniczo wydaje mi się, że pisałem coś innego :P

dajesz jedną funkcję, a ona niech robi po kolei to, co jest potrzebne [...] Powinno to wyglądać mniej-więcej tak: pierwsza funkcja się odpala, następnie wywołuje drugą. Druga sprawdza, czy wprowadzone dane są OK i zwraca jakiś wynik. Jeśli wynik jest pozytywny, to pierwsza funkcja kontynuuje działanie i dodaje dane do tabelki. W przeciwnym przypadku zostaje wyświetlony błąd i pierwsza funkcja kończy swoje działanie, bez dopisywania czegokolwiek. Ważne jest, żebyś nie próbował niczego pisać w tabeli do czasu uzyskania potwierdzenia ze strony funkcji sprawdzającej, że dane są poprawne.

A co do problemów z listenerem - uważam, że pozostawienie tego w onclick nie jest niczym złym, jeśli nie dajesz sobie rady z listenerem, to spokojnie możesz zostawić tak, jak było.

0

Właśnie chciałem popróbować sił z listenerem, bo myślałem, że dam radę ;). Ale w html oneclick pisałeś, że będzie niefajnie :P.
Mógłbyś mnie nakierować jak to mam "poukładać", żeby w listener te funkcje wywołać?

1

No kurcze przeciez napisalem :(

A konkretnie to zapomnij o funkcji, daj jsa na dol dokumentu

1

Ale w html oneclick pisałeś, że będzie niefajnie

Przeczytaj proszę uważnie, co napisałem - to, co zrobiłeś jest raczej nieładne (w sensie - dodanie dwóch funkcji w obsłudze zdarzenia onclick).. Wydawało mi się, że jasno napisłałem (ale być może to mój błąd i tylko tak mi się wydawało) że niefajne jest umieszczanie dwóch funkcji po sobie w ramach jednego onclick'a.

Zamiast tego (co też pisałem wcześniej) lepiej wywołać jedną funkcję, w ramach której odwołasz się do kolejnej.

1

No to masz działający projekt, udało się nam razem dojść do końca :)
Gratulacje za wytrwałość.

Odnośnie rzeczy, które możesz jeszcze poprawić - wymienię tylko dwie najważniejsze

  1. zamiast powtarzać w kółko podczas wypełniania treścią tabelki
komorka  = nowaLinia.insertCell(2);
tresc  = document.createTextNode(form.Data.value);
komorka.appendChild(tresc);

wydziel te linie do osobnej funkcji, którą następnie wywołasz jakoś w stylu

dodajLinię (2, "tekst do dodania");
  1. Nie wiem, czy to celowe działanie, czy przeoczenie - ale moim zdaniem po poprawnym dodaniu wpisu do tabeli, zawartość pól do wpisywania danych powinna zostać wyczyszczona.

1 użytkowników online, w tym zalogowanych: 0, gości: 1