Tutorials
[ Zurück ]


Tutorial: Einen Generator mit Javascrpt erstellen


Ein Generator ist vom Prinzip her einfach:  Es ist ein Festgelegter Code mit 'Löchern' die der Homepagebesucher ausfüllen kann und der am Ende an einem Textfeld ausgegeben wird.
Als erstes muss nach dem <body> tag (oder nach dem Inhalt der davor stehen soll) ein Formular eröffnet werden:
<form method="post" action="#"> 
Dann kommen die Formularfelder wo der Besucher die Sachen eintragen und auswählen kann.
Wichtig ist dass jedes Feld seinen eigenen Namen hat und kein Name doppelt vorkommt.

Normale Textfelder:
 <input name="Name des Textfeldes" value="  vordefinierter text, z.B. http://  ">

Textareas (Große Textfelder):
<textarea cols="Anzahl Spalten" rows="Anzahl reihen" name="Name des Textarea"></textarea>
Auswähllisten:
<select name="Name der Auswählliste">
<option value="Wert">Text der angezeigt wird <option>
...Es können so viele Auswahlmöglichkeiten wie ihr wollt geben..
<option value="other" >andere Auswahl</option>
</select>

Am ende muss dann der Generierenbutton stehen:
  <input value="Generieren"
 onclick="javascript:generator(this.form);" type="button">

Wenn ihr wollt auch ein Reset button:
<input type="reset">

Dann kommt das ausgabefeld (hier ist der name result):
<textarea name="result" readonly="readonly"></textarea>
Jetzt muss noch dass Formular geschlossen werden:
</form>

So jetzt kommt das Script dass die daten Zusammensetzt und an das Ausgabefeld(result) ausgibt:
<script type="text/javascript">
<!--// hiding this script from old browser
function generator(form)
{

form.result.value = '

Dann kommt der Festgelegte Code rrein und an den stellen wo der Besucher selbst auswählen kann kommt:
'+ form.[Name des Formularfeldes,auswälliste, etc].value +'
am schluss  kommt:
';
}
//-->
</script>

So sieht der Code z.B. bei einem Fieldset Generator aus:
Titel: <input name="titel" /> <br>
Text:  <textarea name="text" rows="5" cols="30"></textarea>
Abgerundete Ecken (nur Mozilla):
          <select name="rund">
                <option selected="selected" value="0px">Kein</option>
                <option>1px</option>
                <option>2px</option>
                <option>3px</option>
                <option>4px</option>
                <option>5px</option>
                <option>6px</option>
                <option>7px</option>
                <option>8px</option>
                <option>9px</option>
                <option>10px</option>
                </select>                <br>
       
    <input type="button" onclick="javascript:generator(this.form);" value="Generieren" />   <br >
 
    <textarea readonly="readonly" name="result" rows="10" cols="20" ></textarea>
    <comment title=" Ende FELDERBEREICH "><!-- Ende FELDERBEREICH --></comment>
</form>
<script type="text/javascript">
<!--// hiding this script from old browser
function generator(form)
{

// Beginn MODIFIKATIONSBEREICH
form.result.value = '<fieldset style="-moz-border-radius:'+ form.rund.value +';"><legend>'+ form.titel.value +'</legend>'+ form.text.value +'</fieldset>';
// Ende MODIFIKATIONSBEREICH

}
//-->
</script>
Bei fragen einfach mir schreiben ;)


Erstellt:26.08.09 17:56
Autor: stevenart

Letzte Änderung: 26.08.09 19:28
Geändert von: stevenart

Bewertungen:1
Bewertung: 5.0

Freigeschaltet: Ja
Views 3338

Klicke einfach auf einen Stern!
Wollen Sie wirklich das Tutorial löschen?
Wollen Sie wirklich dieses Tutorial zulassen?
Betreff: Report tutorial [id = 148] !
Absender:
Kommentar:
Wollen Sie wirklich dieses Tutorial zulassen?
Absender:
Kommentar:
Folgende User sind hier gerade aktiv:
-

ANZEIGE