"Inny generator kart postaci"

Stworzyłem generator KP, który działa prawie tak samo jak ten Mangela (tzn. wizualnie tak samo, ale różnie się kodem).
W generatorze tym nie musimy pobierać z formularza ręcznie wszystkich wartości, lecz są one pobierane automatycznie (tak samo jak ilość pól w formularzu).
Czyli w kodzie forum umieszczamy formularz HTML, który ma mieć taką strukturę:
Kod:

Kod:

<form id="form" onsubmit="return false;">
<input type="text" name="Imie" /> Imie<br />
<input type="text" name="Nazwisko" /> Nazwisko<br />
<input type="text" name="Wiek" /> Wiek<br />
<input type="submit" value="Potwierdź" onclick="generator();" />
</form>

Oczywiście pola możemy sobie dopasowywać do własnych potrzeb.
Pole typu submit musi być za wszystkimi innymi polami

Tyle jednak, że atrybut name przy każdym polu jest jednocześnie wartością wyświetlaną w wyświetlonym oknie (czyli np. powyższy kod zwróci okno z treścią:
Kod:

Kod:

Imie: wpisane imie
Nazwisko: wpisane nazwisko
Wiek: wpisany wiek
: (dwukropek) dodawany jest automatycznie.

Kod:

<script type="text/javascript">
function generator() {

//////////////////////////////////
////// USTAWIENIA SKRYPTU ////////
//////////////////////////////////

// pamiętaj, że atrybut name pola formularza
// jest jednocześnie nazwą wyświetloną w oknie

// tekst wyświetlony na stronie nad elementami
// można używać HTML, przed każdym " lub ' umieść \ (backslash)
// cały tekst musi zostać umieszczony w jednej linijce
tekst = "Oto Twoja karta postaci<br />Wklej ją <a href=\"http://www.rudik.boo.pl\">tu</a><br /><br />";

// tekst wyświetlony na stronie pod elementami
tekst2 = "Oto Twoja karta postaci<br />Wklej ją <a href=\"http://www.rudik.boo.pl\">tu</a><br /><br />";

// USTAWIENIA WYGLĄDU STRONY

// kolor tekstu (RGB lub angielska nazwa)
kolor = "#000000";

// wielkość czcionki (wyrażona w px)
wielkosc = "11px";

// tło strony (RGB lub angielska nazwa)
// możesz podać tło obrazkowe, np.: #ffffff url(adres_tła)
tlo = "#ffffff";

// rozmiary wyskakującego okna (bez cudzysłowiów)
szerokosc = 500;
wysokosc = 500;




//////////////////////////////////
///////// WŁAŚCIWY KOD ///////////
//////////////////////////////////

form = document.getElementById("form");
ile = form.length;

strona = "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\"";
strona += "\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">";
strona += "<html xmlns=\"http://www.w3.org/1999/xhtml\">";
strona += "<head>";
strona += "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-2\" />";
strona += "<style type=\"text/css\">body { padding: 20px; color:" + kolor + "; font: " + wielkosc + " Verdana, sans-serif; background:" + tlo + "; } a { color:" + kolor + "; }</style>";
strona += "<title>";
strona += "Generator kart postaci";
strona += "</title>";
strona += "</head>";
strona += "<body>";
strona += tekst;

for (i = 0; i < (ile - 1); i++) {

nazwa = form.elements[i].name;
wartosc = form.elements[i].value;

strona += nazwa + ": " + wartosc + "<br />";

}

strona += "<br />";
strona += tekst2;
strona += "</body>";
strona += "</html>";

ustawienia = "width = " + szerokosc + ", height = " + wysokosc + ", left = 50, top = 50, location = no";

window1 = window.open("", "Nowe okno", ustawienia);
window1.document.write(strona);

form.reset();
}
</script>

W części Ustawienia skryptu możemy sobie dopasować wygląd i treść dodatkową okna do własnych potrzeb.

Jak widać, nie musimy już wpisywać każdej wartości pola do wyskakującego okna, tylko dzieje się to automatycznie.

Skrypt by: Rudik
Klik!