Drukowana wersja tematu

Kliknij tu, aby zobaczyć temat w orginalnym formacie

Forum PHP.pl _ Przedszkole _ [AJAX][JavaScript]Pobieranie wartości z dynamicznego inputa

Napisany przez: Puchatek320 24.03.2020, 01:26:39

Cześć,

Tworzę inputa z treścią przez js

<input name="js_test[]" class="db" type="hidden" id="1" value="mail">
<input name="js_test[]" class="db" type="hidden" id="1" value="test">
<input name="js_test[]" class="db" type="hidden" id="1" value="maks">
<input name="js_test[]" class="db" type="hidden" id="1" value="bartek">

i teraz chciałbym pobrać wszystkie wartości z tych inputów za pomocą ajax i wysłać do skryptu php

  1. if(!http://www.php.net/empty($_POST['js_test']))
  2. {
  3. foreach ($_POST['js_test'] as $key=>$test_js)
  4. {
  5. $test_js = mysqli_real_escape_string($mysqli,$test_js);
  6.  
  7.  
  8. $query = $mysqli->query("SELECT * FROM test WHERE name like '".$test_js."'");
  9.  
  10. while ($row = $query->fetch_array(MYSQLI_ASSOC)) {
  11. $id_test = $row['id'];
  12. }
  13.  
  14. $upTags = "INSERT INTO films_tags (`id_t`,`imie_id`,`nazwa_id`) VALUES (null, '$id', '$id_test')";
  15. if ($mysqli->query($upTags) === TRUE) ;
  16. }
  17. }


Normalnie ze zwykłego inputa pobieram to tak
var n_short = document.getElementById("n_short").value;

Tutaj próbuje

var multiTag = document.getElementsByName("js_test[]");
i pojawia się
NodeList
TypeError: 'stepUp' called on an object that does not implement interface HTMLInputElement.

I tutaj pojawia się pytanie jak mógłbym to przesłać ajaxem? tak żebym nie musiał modyfikować skryptu php o ile to możliwe.


Napisany przez: trueblue 24.03.2020, 07:21:25

Metoda getElementsByName zwraca listę węzłów (tablicę), więc musisz iterować po niej, aby zostać się do każdego elementu po kolei.

Napisany przez: Puchatek320 24.03.2020, 16:04:53

Ajaxem nie mozna przesłać całej tablicy array tak żeby to obrobić później w php?

Napisany przez: nospor 24.03.2020, 16:10:18

Mozna, ale masz przeslac tablice wartosci z inputow a nie tablice inputow. Temu zrob jak ci powiedziano

I juz tak na marginesie
if ($mysqli->query($upTags) === TRUE) ;
po co dajesz tam IF ktory totalnie nic nie robi?

Napisany przez: trueblue 24.03.2020, 16:11:26

Można.
Wysyłasz ciąg zmiennych: js_test[]=mail&js_test[]=test&js_test[]=maks, itd.

Napisany przez: Puchatek320 24.03.2020, 17:33:27

okey, iteruje po nodelist problem w tym że dalej nie wiem jak pobrać z nich value i zapisać do array tak żeby to przesłać ajaxem?

for (var i = 0; i < multiTag.length; i++) {
console.log(multiTag[i]);

}

Napisany przez: trueblue 24.03.2020, 18:13:34

Skoro multiTag[i] to konkretny element, to wartość jest pod value:
multiTag[i].value
Na podstawie tych wartości tworzysz ciąg jak pokazałem Ci wyżej (podstawiając tam te wartości). Taki query string wysyłasz jako zmienne GET lub POST.

Napisany przez: Puchatek320 24.03.2020, 18:37:20

Nie robię tego w prawidłowy sposób ?
zamiast value konsola pokazuje

NodeList(3) [ input#1, input#2, input#3 ]

  1. var multiTag = document.getElementsByName("js_test[]");
  2.  
  3. for (var i = 0; i < multiTag.values(); i++) {
  4. console.log(multiTag[i].value);
  5. var do_wyslania = multiTag[i].value
  6. }
  7. var odebrane = do_wyslania;



Napisany przez: trueblue 24.03.2020, 18:41:16

A nie dostrzegasz różnicy jak budowałeś wcześniej pętlę, a jak obecnie?

Napisany przez: Puchatek320 24.03.2020, 19:04:50

No tak...

Pytanie jak przypisać całą tablicę do zmiennej do_wysłania?

  1. for (var i = 0; i < multiTag.length; i++) {
  2. console.log(multiTag[i].value);
  3. var do_wyslania = [multiTag[i].value,]
  4. }
  5. console.log(do_wyslania);


ponieważ jeśli użyję zmiennej do_wysłania po za pętlą to wyświetla ostatni wynik co jest normalne i nie wiem jak to obejść żeby w tej zmiennej zamiast już wszystkie wyniki

Napisany przez: trueblue 24.03.2020, 19:06:04

Wartości do tabeli dodaje się metodą push: https://developer.mozilla.org/pl/docs/Web/JavaScript/Referencje/Obiekty/Array/push

Napisany przez: viking 24.03.2020, 19:08:04

A jeszcze lepiej
https://developer.mozilla.org/en-US/docs/Web/API/FormData

Napisany przez: Puchatek320 24.03.2020, 20:17:41

Skorzystałem z pushed ale zamiast dodawać to tworzy nową tablicę za każdym razem.

pushed = multiTag.push(do_wyslania,);

Napisany przez: trueblue 24.03.2020, 20:58:16

Tablicę deklarujesz przed pętlą, w pętli wstawiasz do tablicy wartość każdego input z pomocą metody push.

Napisany przez: Puchatek320 25.03.2020, 00:37:33

Dziękuje!

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)