Automatyczne wypełnianie formularza

autor: Patryk 'yarpo' Jar, ostatnia modyfikacja: 2007-02-18

szukaj: formularze ajax js javascript

Skrypt ten napisałem dla własnych potrzeb, przy tworzeniu prostego CMSa. Zamiast tworzyć stronę, na której wybierałbym treść do edycji, zrobiłem stronę która już wczytała wszystko z bazy danych [w założeniu witryna miała być niewielka, więc miało to praktyczne zastosowanie - w duuuużych projektach może się okazać nieprzydatne] do tablic JS i potem - bez przeładowań mogłem wybrać, co chcę edytować. Klikając zapisz przeglądarka przesyłała dane do odpowiedniego skryptu PHP [tak jak w tradycyjnych skryptach z formularzami], a skrypt ten uaktualniał odpowiedni rekord bazy danych.

Może brzmi zawile, ale jest bardzo proste. Zajrzyj w kod:

<!-- DOCTYPE -->
<html>
<!-- metatagi -->
<head>
<script type="text/javascript">
function zmien() {
 var nr = document.forms["jar"].ktore.value;     // numer pozycji
 // do tej tablicy zczytujesz dane z bd
 var tresci = new Array(
        "To jest pierwszy rekord",
        "To jest drugi rekord",
        "To jest trzeci rekord",
        "Ostatni text" );
 document.forms["jar"].tresc.value = tresci[nr];  /*  wyświetlenie odpowiedniej pozycji tablicy */
 document.forms["jar"].rekord.value = nr; // nr rekordu w bd
}
-->
</script>
</head>
<body>
 <form name="jar">
  &lt;textarea name="tresc" cols="20" rows="5">Tu będzie się pojawiać treść &lt;/textarea>
  <select name="ktore" OnChange="zmien()">
   <option value="0">Pierwszy</option>
   <option value="1">Drugi</option>
   <option value="2">Trzeci</option>
   <option value="3">Czwarty</option>
  </select>
  <input type="text" name="rekord" size="2" />
 </form>
</body>
</html>

Oczywiście skrypt ten można także wykorzystywać na "sztywno", tzn. bez jakiegokolwiek udziału bazy danych i PHP. Jednak skoro już zacząłem pisać, w jakim kontekście ja go użyłem, to może skończę :-)

Jeszcze moment o zasadzie działania...

Najpierw działasz skryptem PHP [lub inny język server-side]:

pobierasz dane z bd (cała tabelę)
używając funkcji echo/print tworzysz odpowiedni kod skryptu JS, tablice, gdzie na odpowiednich pozycjach znajdują się kolejne rekordy bd

Teraz czas na działanie skryptu JS:

wybierasz odpowiednią pozycję z tablicy [a nr pozycji tablicy odpowiada nr rekordu w bazie danych MySQL]
edytujesz
przesyłasz wynik do skryptu PHP

I tu już wszystko po staremu. Pobierasz dane z tablicy $_POST i uaktualniasz bd.

Oczywiście pole tekstowe 'input' warto byłoby ukryć zmieniając:

<input type="text" ... />

na:

<input type="hidden" ... />

W żaden sposób nie zmieni to działania skryptu.

Ważna uwaga

Podczas z czytywania danych z db, należy w miejsce wartości opcji:

<option value="0">Pierwszy</option>

Wstawiać nr rekordu tabeli. Następnie na stronie zapisującej zmiany należy pobrać inormacje o nr rekordu i nadpisać go. Oczywiście tu bardzo uprościełm cały skrypt. Można mieć dużo więcej tablic i dużo więcej pól tekstowych.

Mówiłem, że nieskomplikowany skrypt :-)

Patryk 'yarpo' Jar

szukaj: formularze ajax ajax js javascript

Osoby czytające tę publikację przeglądały również:

Chcesz zostać programistą?

Poznaj 6 kroków do efektywnej
nauki programowania!