Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [AJAX][JavaScript][PHP]Czytanie wartości z inputów w skrypcie php po podmianie AJAX
Forum PHP.pl > Forum > Przedszkole
tomek8112
Witam,

w temacie php i js jestem jeszcze świerzy, więc w tym dziale pytanie. Pisze aplikację, której jednym z zadań będzie generowanie tabeli wypełnionej słowami (użytkownik podaje wymiar tabeli, ile wierszy, ile kolumn, aplikacja łączy się z bazą danych i wyciąga losowe słowa w ilosci wiersze*kolumny i nimi wypełnia tabelę i pokazuje na ekranie). Użytkownik ogląda słowa, potem, następuje podmiana tabeli słów na tabelę o takich samych wymiarach (AJAX), ale wypełnioną inputami typu text z określonym id. Zadaniem użytkownika jest w odpowiednie pola wpisać zapamiętane słowa. Aplikacja ma pobrać te wartoci z pól i porównać ze słowami prezentowanymi w poprzedniej tabeli. Skrypt działa do momentu podmiany (AJAX), ale nie wiem co jest nie tak ze skryptem js, który powinien czytać wartosci z pól. Próbowałem już chyba wszystkiego co mi przyszło do głowy i cały czas pojawiają się jakieś problemy. Najdalej doszegłem do tego, że skrypt pobrał wartość tylko z pierwszego pola, przeglądarka się wiesza, a firebug daje komunikat, że skrypt się jeszcze ładuje. Ten plik generuje tabele ze słowami
Kod
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
    <script type="text/javascript" src="zadanie.js"></script>
    
</head>
<body>
<input type="submit" value="pamiętam" onclick="zamiana()"><br>  
    <?php
        $_SESSION['wiersze']=$_POST['wiersz'];
        $_SESSION['kolumny']=$_POST['kolumna'];

        $liczbaSlow=$_SESSION['wiersze'] * $_SESSION['kolumny'];

        include('polaczenie.php');

        $pytanie=$mysqli->query("SELECT slowa FROM slowa ORDER BY RAND() LIMIT $liczbaSlow ");

        echo "<div id="."kwadrat".">";

        echo "<table>";

            for($j=1;$j<=$_SESSION['wiersze'];$j++)
                {
                   echo "<tr>";
                   for($i=1;$i<=$_SESSION['kolumny'];$i++)
                    {
                        $slowa=mysqli_fetch_array($pytanie);
                        echo '<td id="'; echo $j.$i; echo '">'.$slowa['slowa'] . "</td>";
                    }
                   echo "</tr>";
                }

        echo "</table>";

        echo "</div>";
  
    ?>
    
<form action="slowa.php" method="post">
ile wierszy:<input type="number" name="wiersz" value="wiersz"><br>
ile kolumn:<input type="number" name="kolumna" value="kolumna"><br>
<input type="submit" value="zatwierdz"><br>
</form>
  <script type="text/javascript"><!---------------------------TU JEST TEN PROBLEMOWY SKRYPT
        function zaladuj(){
            function sprawdz(){
    
                var a=<?php echo $_SESSION['wiersze'];?>;
                var b=<?php echo $_SESSION['kolumny'];?>;
    
          for(var j=1; j<= a; j++)
            {
                for(var i=1; i<= b; i++)
                    {
                       document.write(document.getElementById(j+i).value+"<br>");
                     }
            }
    
}
        }
  </script>  
</body>
</html>


A z tego zostaje wyciągnięta AJAXem zawartość body
Kod
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>zamiana</title>
</head>
<body onload="zaladuj()">
    
    <?php

echo "<table>";

    for($j=1;$j<=$_SESSION['wiersze'];$j++)
    {
       echo "<tr>";
           for($i=1;$i<=$_SESSION['kolumny'];$i++)
            {
                echo '<td><input type="text" id="'; echo $j.$i; echo '"></td>';
             }
       echo "</tr>";
    }

echo "</table>";

    ?>
  
<input type=submit value="sprawdzam" onclick="sprawdz()">
    
</body>
</html>

Dzięki:)
bostaf
Tak na pierwszy rzut oka to funkcja zaladuj() nic nie robi, bo ona tylko zawiera definicję funkcji sprawdz(). Czyli "<body onload="zaladuj()">" nie ma absolutnie żadnego widocznego efektu.

Z kolei to:
  1. <input type=submit value="sprawdzam" onclick="sprawdz()">

w konsoli wyrzuci błąd "sprawdz is not defined", bo funkcja sprawdz() nie jest dostępna globalnie, a tylko lokalnie z poziomu funkcji zaladuj().

Musiałbyś chyba zacząć od poprawienia definicji tych dwóch funkcji. Napisałeś, że jesteś początkujący, więc podejrzewam że przypadkowo zagnieździłeś sprawdz() w zaladuj().
Co masz w zadanie.js?
tomek8112
Po między <body onload="zaladuj()"> </body> są inputy, które zostaną podmienione w ajax. Funkcja zaladuj() , tak mi się przynajmniej wydawało, wstrzyma ładowanie funkcji sprawdz(), która ma pobierać wartości z tych inputów, do chwili ąż załaduje się zawartość z pomiędzy body, stąd onload. Wcześniej pojawiał się komunikat, że document. getElementById() is null. Wykombinowałęm, że to pewnie dlatego, że document.getElementById() nie ma jeszcze czego czytać, bo to przed ajaxem.

Poniżej zawartośc pliku zadanie.js (nazwa pliku bez polskich znaków, chodziło o żądanie)

function zamiana(){
var zapytanie="";
zapytanie=new XMLHttpRequest();
zapytanie.onreadystatechange=function(){
if (zapytanie.readyState==4 && zapytanie.status == 200) {
document.getElementById("kwadrat").innerHTML=zapytanie.responseText;
}
}
zapytanie.open("GET", "zamiana.php", true);
zapytanie.send();
}

plik tworzy żądanie i pobiera zawartość z pliku zmiana.php.
viking
Zdarzeń nie zapisuj w ten sposób bo tylko robisz nieczytelny śmietnik. https://developer.mozilla.org/en-US/docs/We...ddEventListener + https://developer.mozilla.org/en-US/docs/We...OMContentLoaded i przenieś js do zewnętrznego pliku.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.