• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Pobranie danych z inputa bez przeładowania strony

VPS Starter Arubacloud
0 głosów
1,433 wizyt
pytanie zadane 7 lutego 2019 w JavaScript przez Luckyluck87 Użytkownik (660 p.)

Witam, mam taki problem , potrzebuje wykonać pewne zadanie w JS którego częścią jest pobranie wartości z inputa typu "text". Ma to się odbyć bez przeładowania strony. Mam taki kodzik:

<form class="form__body" action="" method="post">
           <input id="text" type="text" value="" placeholder="wpisz coś">
           <input class="submit" type="submit" value="Wyślij">
</form>
var url = "https://www.tuprzykładowyadresstrony...."
var text = document.querySelector("#text").value
var button = document.querySelector('.submit');
            
button.addEventListener("click", function () {
                
        url = url + text;
        console.log(url);
        
  })

Próbuję już od kilku godzin i nie wiem jak zrobić żeby po każdym wpisaniu jakiejkolwiek wartości w polu, w console.log pojawiał się wynik bez przeładowania strony... Będę wdzięczny za pomoc. Pozdrawiam

2 odpowiedzi

+1 głos
odpowiedź 7 lutego 2019 przez pablop76 VIP (123,060 p.)
edycja 7 lutego 2019 przez pablop76

1. Jeżeli pobierasz id to użyj 

 getElementById();

2. Jeżeli używasz

<input type="submit">

 to musisz zablokować domyślna akcję przeglądarki (przeładowanie) za pomocą 

preventDefault()

lub zmienić na 

<button class="submit" type="submit" value="Wylij"></button>

3. Nasłuchuj na

<input id="text" type="text" value="" placeholder="wpisz coś">

zdarzenia input i pobieraj

e.target.value

Dostaniesz na żywo to co user wpisuje w input.

komentarz 7 lutego 2019 przez Luckyluck87 Użytkownik (660 p.)
Dziękuję za odpowiedź,

Mam kilka pytań:

- czemu jak pobieram id to mam używać "getElementById", querrySelektor jest nieodpowiedni ?

- i o jak użyć tego "e.target.value" ?
komentarz 7 lutego 2019 przez pablop76 VIP (123,060 p.)
edycja 7 lutego 2019 przez pablop76

queryselector vs getelementbyid

Test prędkości 

const text = document.getElementById("text");
text.addEventListener("input", e => {
e.preventDefault();
console.log(e.target.value);
})

 

komentarz 7 lutego 2019 przez Luckyluck87 Użytkownik (660 p.)
Dziękuje bardzo ! :)
+1 głos
odpowiedź 7 lutego 2019 przez Tomek Sochacki Ekspert (227,510 p.)
Do tego w ogóle nie potrzebujesz formularza, wystarczy najprosze rozwiązanie:

https://codepen.io/anon/pen/aXVRxK?editors=1010
komentarz 7 lutego 2019 przez Luckyluck87 Użytkownik (660 p.)
O rewelacja :D ! Dziękuję bardzo i pozdrawiam

Podobne pytania

0 głosów
1 odpowiedź 306 wizyt
pytanie zadane 21 grudnia 2019 w PHP przez milogab2004 Początkujący (440 p.)
0 głosów
2 odpowiedzi 819 wizyt
pytanie zadane 24 marca 2020 w PHP przez Hardwell Dyskutant (8,960 p.)
0 głosów
5 odpowiedzi 639 wizyt
pytanie zadane 17 grudnia 2018 w PHP przez jared Gaduła (3,600 p.)

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...