Autor Wątek: Logowanie do strony, uruchomienie skryptu JS  (Przeczytany 8106 razy)

Offline LizarD

  • Użytkownik

# Maj 13, 2016, 02:36:34
Witam!

Jestem świeżakiem odnośnie HTML PHP CSS JavaScript, ogólne pojęcie mam ale jak jest teraz AJAX to mam pytanie jak powinno kilka rzeczy wyglądać. Nie chcę pisać dziesięciu podstron zawierających różne treści a różniące się tak naprawdę tym tylko wolę je przeładowywać i pierwsze pytanie nachodzi na stronę tytułową czyli ekran logowania, kod wygląda tak:
<form>
 
  <label for="fname">Login:</label><br />
  <input type="text" id="loginEditText" name="l" value=""><br />
 
  <label for="fname">Password:</label><br />
  <input type="password" id="passwordEditText" name="p" value=""><br /><br />
 
 <input class="button" type="submit" value="Login">

</form>
Tylko po wciśnięciu przycisku strona natychmiast się przeładowuje a dane zostają wysłane do serwera i następuje przeładowanie strony nie zdążę ich sprawdzić skryptem JavaScript.... Efekt chcę uzyskać taki, wciskam przycisk dostaję pozytywną odpowiedź od serwera że użytkownik się zalogował i ekran logowania mi ładnie znika i wyświetla się właściwa strona główna bez żadnego przerwania w sensie że użytkownik widzi jak się na nowo wczytuje strona. Więc zrezygnować z form ? I jak odebrać pozytywną odpowiedź żeby uruchomić skrypt JavaScript wyświetlający nowe kontrolki i ukrywający te do logowania ?

Offline Mr. Spam

  • Miłośnik przetworów mięsnych

Offline Karol

  • Użytkownik

# Maj 13, 2016, 09:17:56
Musisz w JSie podpiąć event onSubmit i musisz tam dać return false, ew. e.preventDefault() (już nie pamiętam jaka przeglądarka czego oczekuje). W każdym bądź razie efekt ma być taki, że JS ma przechwycić zdarzenie i zablokować domyślne wykonywanie, w tym czasie możesz odpalić request ajaxowy, który w callbackach success/failure zrobi co ma zrobić.

Offline Kos

  • Użytkownik
    • kos.gd

# Maj 13, 2016, 09:20:45
okej, z rozpędu:

1. <label for="fname"> - zamiast fname wpisz nazwę (name) pola którego label dotyczy. Poznasz że działa po tym że mogę kliknąć label i się zaznacza odpowiednie pole.

2. daruj sobie <br />, zrób sobie <div class="form-field">...</div> i ustaw mu w css marginesy. Zobacz sobie też jak robi to bootstrap (tam to się nazywa form-group): http://getbootstrap.com/css/#forms

3. <form> domyślnie będzie przekierowywał na stronę z akcją, ale możesz na niego założyć event listener na zdarzenie "submit" i zrobić w nim co chcesz, np. AJAX. https://jsfiddle.net/w7z1rwq4/

Offline LizarD

  • Użytkownik

# Maj 13, 2016, 12:45:46
3. <form> domyślnie będzie przekierowywał na stronę z akcją, ale możesz na niego założyć event listener na zdarzenie "submit" i zrobić w nim co chcesz, np. AJAX. https://jsfiddle.net/w7z1rwq4/
To może lepiej darować już sobie całe "<form>" skoro i tak "ręcznie w JS" będę przesyłał login ?

@Karol
Do przycisku submit podpinam metodę onClick i zwracam false ?

Offline lethern

  • Użytkownik

# Maj 13, 2016, 12:52:47
coś w ten deseń
<input type="button" onclick="return myFunc();"></input>

function myFunc(){
...
return false;
};

(type button nie wysyła formy z tego co pamiętam)

*edit*
Cytuj
I jak odebrać pozytywną odpowiedź żeby uruchomić skrypt JavaScript wyświetlający nowe kontrolki i ukrywający te do logowania
callback z ajaxa?
ukrycie to
document.findElementById('mojdiv').style.display='none';
wyświetlenie - odwrotnie (tzn. element ma domyślnie display none, a skrypt robi np. display='block')

@down - na tym etapie (nauki) nie martwiłbym się kompatybilnością... po co komplikować ..ale to tylko moje zdanie
« Ostatnia zmiana: Maj 13, 2016, 14:20:26 wysłana przez lethern »

Offline Karol

  • Użytkownik

  • +1
# Maj 13, 2016, 14:13:19
To może lepiej darować już sobie całe "<form>" skoro i tak "ręcznie w JS" będę przesyłał login ?
@Karol
Do przycisku submit podpinam metodę onClick i zwracam false ?
Jeżeli zostawisz form to będziesz kompatybilny jak ktoś nie będzie miał włączonego JS'a w przeglądarce.

Lepiej podpiąć się pod event onSubmit samego formularza, a nie pod guzik. Zerknij tutaj https://jsfiddle.net/sqpuynmL/

Offline Kos

  • Użytkownik
    • kos.gd

# Maj 13, 2016, 14:26:23
Jeżeli zostawisz form to będziesz kompatybilny jak ktoś nie będzie miał włączonego JS'a w przeglądarce.

Szykowanie strony do działania bez JS to dodatkowa praca i nie każdy się na to pisze. Zależy od rodzaju projektu (bardziej jak strona z dynamicznymi elementami czy bardziej jak aplikacja? jak to drugie to spokojnie można wymagać JS).

Offline Xion

  • Moderator
    • xion.log

# Maj 13, 2016, 16:40:08
Wciśnięcie przycisku to nie jedyny sposób submitowania formy. Bez taga <form> nie będzie działał np. Enter.

Co do oryginalnego pytania, prawidłowe rozwiązanie podał Kos powyżej (w szczególności chodzi o nieużywanie archaizmów typu onsubmit="foo();").
« Ostatnia zmiana: Maj 13, 2016, 16:43:01 wysłana przez Xion »

Offline LizarD

  • Użytkownik

# Maj 16, 2016, 01:49:16
Czyli to ma wyglądać tak:
<form class="js-login-form">
 
  <div class="form-group">
    <label for="loginLabel">Login:</label>
    <input type="text" class="form-control" id="loginInput">
  </div>
 
  <div class="form-group">
    <label for="passwordLabel">Password:</label>
    <input type="password" class="form-control" id="passwordInput">
  </div>

  <input type="submit" class="loginButton" value="Login">

</form>
Skrypt JS:var form = document.getElementsByClassName('js-login-form')[0];
form.addEventListener('submit', function(e) {
  e.preventDefault();
  alert("submit formularza");
});
Tylko ten kod w skrypcie opakowuje jako funkcję ale gdzie ją wywołuję ?
I jeszcze jedno pytanie:
<input type="submit" class="loginButton" value="Login">Podobno powinno się korzystać z input a nie button, pytanie dlaczego ?

Offline Karol

  • Użytkownik

# Maj 16, 2016, 02:13:48
Tylko ten kod w skrypcie opakowuje jako funkcję ale gdzie ją wywołuję ?
Najlepiej po załadowaniu DOMu przez przeglądarkę, ew. PO formularzu ją wsadź normalnie jako <script> (w momencie wykonywania musi być już znany form z klasą js-login-form).

Btw. Chcesz się bawić w AJAXy na vanilla js? Ostro :).

Podobno powinno się korzystać z input a nie button, pytanie dlaczego ?
Zapewne ze względu na kompatybilność.

Jeszcze co do e.preventDefault(); to z tego co pamiętam to działa tylko na części przeglądarek, a na niektórych działa tylko return false; najlepiej połączyć obie te praktyki.

Offline LizarD

  • Użytkownik

# Maj 16, 2016, 02:20:35
Najlepiej po załadowaniu DOMu przez przeglądarkę, ew. PO formularzu ją wsadź normalnie jako <script> (w momencie wykonywania musi być już znany form z klasą js-login-form).

Btw. Chcesz się bawić w AJAXy na vanilla js? Ostro :).
Mógłbyś rozwinąć ?

Offline Karol

  • Użytkownik

# Maj 16, 2016, 02:28:24
Które mam rozwinąć?

Jeżeli pierwsze to przeglądarka interpretuje wszystkie osadzone skrypty jak leci, jeżeli trafi na <script> to ładuje go i wykonuje zanim przetworzy resztę strony. Jeżeli wstawisz skrypt z var form = document.getElementsByClassName('js-login-form')[0]; jako skrypt linkowany w headzie to zawsze tam będziesz miał nulla. Musisz więc ten skrypt wstawić w HTMLu PO tym formularzu, albo podpiąć się z bindowaniem pod event, który jest wywoływany gdy przeglądarka załaduje całą strukturę DOM.

Jeżeli o drugie to po tym jak stosujesz document.getElementsByClassName oraz form.addEventListener wnioskuję, że nie używasz choćby jQuery, które ułatwia bardzo taką pracę i ma też prostą obsługę AJAxów, co widać w tym fiddlerze co podałem wcześniej.

Offline lethern

  • Użytkownik

# Maj 16, 2016, 12:56:25
Pozwole sobie 3 grosze do wypowiedzi Karola
Jeśli będziesz miał
<script>document.getElementsByClassName('js-login-form')[0];</script>
<form class="js-login-form">
To wywali błąd typu nie można pobrać elementu z pustej tablicy, bo JS wykona się i będzie szukał elementu którego parser jeszcze nie zdążył ruszyć
Natomiast
<form class="js-login-form">
<script>document.getElementsByClassName('js-login-form')[0];</script>
wywoła się poprawnie
Jednak operowanie skryptami w połowie parsowania strony i budowania DOM nie jest ładne, dlatego możesz chcieć wywołać ten skrypt w evencie po załadowaniu strony, czyli np. tak
window.addEventListener('load', myFuncOnLoad);
function myFuncOnLoad(){
   // stuff do wykonania po załadowaniu
};
Lub (obsługując starsze przeglądarki)
if( typeof window.attachEvent !== 'undefined' )
window.attachEvent('onload', myFuncOnLoad);
else
window.addEventListener('load', myFuncOnLoad);
(albo użyć jquery, który ma takie rzeczy od ręki)
Taki skrypt możesz umieścić gdziekolwiek, czy to w HEAD strony czy na końcu

Cytuj
Podobno powinno się korzystać z input a nie button, pytanie dlaczego ?
pewnie żeby nie mieć dziwnych błędów / niechcianych rzeczy
http://stackoverflow.com/questions/469059/button-vs-input-type-button-which-to-use
« Ostatnia zmiana: Maj 16, 2016, 13:04:27 wysłana przez lethern »

Offline LizarD

  • Użytkownik

# Maj 16, 2016, 22:15:32
Czyli spokojnie mogę dojść do wniosku żeby korzystać z jQuery ? Strona do moich prywatnych zastosowań i to jest biblioteka darmowa i bardzo popularna czy ona jest jako wspomaganie dla początkującego ?

Offline Kos

  • Użytkownik
    • kos.gd

# Maj 16, 2016, 22:29:50
Czyli spokojnie mogę dojść do wniosku żeby korzystać z jQuery ? Strona do moich prywatnych zastosowań i to jest biblioteka darmowa i bardzo popularna czy ona jest jako wspomaganie dla początkującego ?
Darmowa i bardzo popularna, zasila większość internetu. jQuery to jest taki worek ze wszystkim - 80% nie potrzebujesz, ale pozostałe 20% obetnie Ci ilość kodu do napisania o połowę.

Miej też świadomość że ludzie się hurtowo przerzucają na nowe rzeczy typu React czy np Angular, które już dużo mocniej ingerują w sposób robienia stron, ale opłacają się przy odpowiednio złożonym projekcie.