Reaktion auf Benutzereingaben

[DexXxtrin]

Hallo Zusammen,

Manche Homepages reagieren auf Benutzereingaben ohne dass die Seite neu geladen wird.
Sprich wenn ich bei ein Textfeld ausfülle erscheint automatisch ein Weiteres oder Informationen dazu.
Wie wird so etwas gemacht? Ist das möglich nur mit HTML/PHP/CSS, also ohne javascript o.Ä...?

Gruss DexXxtrin

 

[sheel]

Hi

Nein, das ist JavaScript.
Genauer gesagt Ajax.

Mit Flash oder sogar Java wäre es auch möglich, aber das wäre Kanonen-auf-Spatzen.

Gruß

 

[DexXxtrin]

Ok. Ajax tönt für mich schon was besser als JavaScript.
Bitte korrigieren wenn ich mich irre:
JavaScript kann ja deaktiviert oder nicht unterstütz sein, was bedeuten würde, dass das nicht funktioniert.
Wie ist das mit Ajax? Kenne Ajax noch überhaupt nicht...

 

[sheel]

Ajax ist ein Teilbereich von Javascript.
Wenn JS deaktiviert ist, geht Ajax auch nicht.

(Ich bin mir gerade nicht sicher, ob ich dich richtig verstanden habe.
Den Ajax-Teil brauchst du nur, wenn die zusätzlichen Infos je Eingabe vom Server
geholt werden müssen. Wenns auch ohne Serverkontakt geht, richt das normale JS).

Entweder ignoriert man den (kleinen) Teil der Leute, die JS nicht mögen,
oder muss die Seite so machen, dass sie auch ohne JS bedienbar bleibt:
Neben das EIngabefeld einen Button Absenden oder so und beim Laden der Seite
diesen Button mit JS verschwinden lassen.

Wenn man JS an hat:
Seite wird geladen, Button wird nicht angezeigt, Eingabe wird von JS verarbeitet.
Wenn JS aus ist:
Seite wird geladen, JS kann den Button nicht verschwinden lassen.

 

[DexXxtrin]

Den Server braucht es eigentlich nicht.
Es geht nur darum, wenn ein Textfeld ausgefüllt wurde, ein weiteres darzustellen.
Oder wenn ein Textfeld aktiv ist, eine Box mit Informationen dazu (Bei einem Formular, damit es verständlicher wird für den Benutzer).

 

[sheel]

Dann gehts auch ohne Ajax, nur JS.

 

[DexXxtrin]

Also ich das jetzt mal verschiedene Sachen versucht von diversen Seiten im Internet, aber komme einfach nicht auf das gewünschte Ziel.
Ich habe auf meiner Seite eine Tabelle, in welcher sich das Formular befindet.
Jedes Eingabefeld eine neue Zelle.
Nun möcht ich, dass wenn beim einten Textfeld eine Eingabe getätigt wird automatisch ein nextes erscheint. Bei dem ist es dann wieder das Selbe.
Nun mein Problem: Ich schaffe es nicht, ein neues Textfeld in meine Struktur einzufügen. Hab zwar Code-Schnipsel gefunden mit denen ich es geschaft habe ein neues zu erstellen, allerdings nicht am gewünschten und mit der gewünschten Formatierung.

Wäre sehr froh um Hilfe

Meine Struktur:

<table cellspacing="1" cellpadding="0" border="0" width="100%" align="center" valign="top" style="font-size: 1em; margin: 20px;">
				
<form action="index.php?sid=carsubmit" method="post">
<tr height="30px"> 

   <td align="left" valign="middle" width="20%">Nachname*:</td>

   <td align="left" valign="middle" width="80%"> 

     <input type="text" size="30" name="lastname">

   </td>

 </tr>

 <tr height="30px"> 

   <td align="left" valign="middle" width="20%">Vorname*:</td>

   <td align="left" valign="middle" width="80%"> 

      <input type="text" size="30" name="prename">

   </td>

 </tr>

 <tr height="30px"> 

   <td align="left" valign="middle" width="20%">Adresse*:</td>

   <td align="left" valign="middle" width="80%"> 

     <input type="text" size="30" name="address">

   </td>

 </tr>
</form>
</table>

PS: bitte ins JavaScrip Forum verschieben

 

[tombe]

Versuche mal das hier:

<script language="javascript" type="text/javascript">
function zeile(feld) {
if (document.getElementById(feld).value.length != 0) {
    document.getElementsByTagName("tr")[feld + 1].style.display = "block";
} else if (document.getElementById(feld).value.length == 0) {
    for (feld; feld < 2; feld++) {
        document.getElementsByTagName("tr")[feld].style.display = "none";
    }
}

}
</script>

<form action="index.php?sid=carsubmit" method="post">
<table cellspacing="1" cellpadding="0" border="0" width="100%" align="center" valign="top" style="font-size: 1em; margin: 20px;">
    <tr>
        <td align="left" valign="middle" width="20%">Nachname*:</td>
        <td align="left" valign="middle" width="80%"><input type="text" size="30" name="lastname" id="0" onkeyup="zeile(0);"></td>
    </tr>
    <tr style="display: none;">
        <td align="left" valign="middle" width="20%">Vorname*:</td>
        <td align="left" valign="middle" width="80%"><input type="text" size="30" name="prename" id="1" onkeyup="zeile(1);"></td>
    </tr>
    <tr style="display: none;">
        <td align="left" valign="middle" width="20%">Adresse*:</td>
        <td align="left" valign="middle" width="80%"><input type="text" size="30" name="address" id="2" onkeyup="zeile(2);"></td>
    </tr>
</table>
</form>

 

[DexXxtrin]

Funktioniert bei mir nicht....
Es macht zwar etwas (Formatierung des Textes, an einem anderen Ort ändert sich) allerdings ist kein neues Element zu sehen..

 

[tombe]

Sorry, nich gut genug getestet. Aber mit diesem Script hat es bei mir jetzt wirklich geklappt.

function zeile(feld) {

if (document.getElementById(feld).value.length != 0 && feld < 2) {
    document.getElementsByTagName("tr")[feld + 1].style.display = "block";
} else if (document.getElementById(feld).value.length == 0 && feld < 2) {
    for (feld++; feld <= 2; feld++) {
        document.getElementsByTagName("tr")[feld].style.display = "none";
    }
}

}