• 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

0 głosów
99 wizyt
pytanie zadane 7 lutego w JavaScript, jQuery, AJAX przez Luckyluck87 Nowicjusz (200 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 przez pablop76 Szeryf (84,030 p.)
edycja 7 lutego 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 przez Luckyluck87 Nowicjusz (200 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 przez pablop76 Szeryf (84,030 p.)
edycja 7 lutego 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 przez Luckyluck87 Nowicjusz (200 p.)
Dziękuje bardzo ! :)
+1 głos
odpowiedź 7 lutego przez Tomek Sochacki Mędrzec (157,870 p.)
Do tego w ogóle nie potrzebujesz formularza, wystarczy najprosze rozwiązanie:

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

Podobne pytania

0 głosów
5 odpowiedzi 133 wizyt
pytanie zadane 17 grudnia 2018 w PHP, Symfony, Zend przez jarok Obywatel (1,100 p.)
+1 głos
2 odpowiedzi 1,246 wizyt
0 głosów
1 odpowiedź 430 wizyt
pytanie zadane 27 października 2017 w JavaScript, jQuery, AJAX przez leszek37 Nowicjusz (120 p.)
Porady nie od parady
Forum posiada swój własny chat IRC, dzięki któremu będziesz mógł po prostu pogadać z innymi Pasjonatami lub zapytać o jakiś problem. Podstrona z chatem znajduje się w menu pod ikoną człowieka w dymku.IRC

60,252 zapytań

105,938 odpowiedzi

220,099 komentarzy

32,461 pasjonatów

Przeglądających: 302
Pasjonatów: 16 Gości: 286

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...