webmaster webmastering webdesign

Jesteś tutaj: webmade.org >> porady >> javascript

Automatyczne wypełnianie formularza

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

szukaj: formularze formularze ajax ajax js js javascript 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]:

Teraz czas na działanie skryptu JS:

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

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

Szukasz wykonawcy?
Tworzenie stron www.
Skontaktuj się z nami!

 

valid XHTML
valid CSS
© 2004-2008 copyright by webmade.org