Problem z tworzeniem nowego diva w liście

0

Tworze prosta liste w której za pomocą wprowadzonych danych w formularzu, wyswietla sie imie, nazwisko i wiek. Niestety kiedy wciskam button zebu submitowac, to przez sekunde wyświetlają mi sie divy a potem znikają. Nie wiem czym jest to spowodowane, bo divy są tworzone w osobnym kontenerze poza formularzem.

link do kodu: https://jsfiddle.net/pob6ytgk/

1

Klikasz "wyślij":

  • odpala się akcja js powiązana z wysłaniem formularza,
  • powiązana z wysłaniem akcja dodaje ci na stronie nowe elementy,
  • następuje wysłanie formularza (czyli przeładowanie strony),
  • odczytujesz stronę od nowa w stanie wyjściowym, czyli bez dodanych js-em elementów.

Jak chcesz mieć te div-y po przeładowaniu, potrzebujesz użyć PHP po stronie serwera
lub ew. nie przeładowywać całej strony tylko bawić się asynchroniczne wysyłanie danych.

1

Co do dyskusji w komentarzach, ja bym <form> zostawił, nawet jeśli nie są wysyłane żadne dane na serwer, to znacznik <form> dodaje semantycznego znaczenia dla treści. Ułatwia korzystanie użytkownikom z czytnikami ekranowymi, wraz z odpowiednimi <label> dla pól formularza.

Zamieniłbym tylko nasłuchiwanie eventu click na przycisku, na nasłuchiwanie eventu submit na całym formularzu. Dzięki czemu dostajemy "za darmo" odpalenie formularza za pomocą klawiatury.

Aby zablokować wysyłanie formularza wystarczy dodać preventDefault() dla eventu. Czyli całość widziałbym tak:
https://jsfiddle.net/vpnLhr95/

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