PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : dynamisches Formular


diablo
13.10.2004, 18:29:25
Hallo Allerseits,

ich habe gerade mit php neu angefangen und stosse jetzt auf folgendes Problem:
Ich habe ein Formular erzeugt, welches diverse Eingabezeilen besitzt. Jedoch soll beim Betätigen der Select-Box das Formular dynamisch verändert werden (verkleinert bzw. erweitert mit neuen Einträgen). Bisher habe ich aber keine Idee, wie man es realisiert. Ich will nicht, daß das gesamte Formular deswegen übermittelt wird, sondern nur ein kleiner Teil des Formulars geändert wird. Hier mal mein Code:

<form name="kontaktformular" action="formmail.php" method="post">
<table width="100%" border="0">

<tr>
<td>Firma :</td>
<td><input name="Firma" type="text" size="40" ></td>
</tr>
<tr>
<td>Anrede:</td>
<td><select name="Anrede">
<option>Herr</option>
<option>Frau</option>
</select></td>
</tr>
<tr>
<td>Vorname:</td>
<td> <input type="text" name="Vorname" size="40"></td>
</tr>
<tr>
<td>Nachname:</td>
<td> <input type="text" name="Nachname" size="40"></td>
</tr>
<tr>
<td>Telefon: </td>
<td> <input type="text" name="Telefon" size="40"></td>
</tr>
<tr>
<td>Fax:</td>
<td><input type="text" name="Fax" size="40"></td>
</tr>
<tr>
<td>E-Mail:</td>
<td> <input type="text" name="E-Mail" size="40"></td>
</tr>
<tr>
<td>Betreff:</td>
<td><select name="subject" onChange="">
<option>Buchungsanfrage</option>
<option>Sonstiges</option>
</select></td>
</tr>
<?
if($subject == "Buchungsanfrage") {
echo "<tr>";
echo "<td>";
echo "Personenanzahl:";
echo "</td>";
echo "<td>";
echo "<input type='text' name='Personenanzahl' size='20'>";
echo "</td>";
echo "</tr>";
echo "<tr>";
echo "<td>";
echo "gewünschter Zeitraum:";
echo "</td>";
echo "<td>";
echo "<input type='text' name='Zeitraum' size='20'>";
echo "</td>";
echo "</tr>";
echo "<tr>";
echo "<td>";
echo "Wohntyp:";
echo "</td>";
echo "<td>";
echo "<label>";
echo "<input type='radio' name='Wohntyp' value='Ferienhaus'>Ferienhaus</label>";
echo "<label>";
echo "<input type='radio' name='Optionsschaltergruppe1' value='Ferienwohnung'>Ferienwohnung</label>";
echo "</td>";
echo "</tr>";
}
?>
<tr>
<td valign="top">Nachricht: </td>
<td><textarea name="Nachricht" cols="50" rows="10"></textarea></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
<input type="submit" name="Submit" value="Senden">
<input type="reset" name="Submit" value="Zur&uuml;cksetzen">

</form>

Wenn die Option Buchungsanfrage gesetzt ist, dann soll der PHP Code ausgeführt werden, sonst nicht.
Ich weis nicht, ob es überhaupt möglich ist, so wie ich es mir gedacht habe.


Mfg
Diablo

xabbuh
13.10.2004, 18:35:21
Das alle was im PHP-Block drin steht, der dann ausgeführt werden soll, kannst du in ein <div> schreiben:


<div id="text" style="display:none;">
<!-- hier der html-text -->
</div>


Und mit JavaScript kannst du dann dieses div sichtbar machen:

<script type="text/javascript">
<!--
function showText()
{
if(document.kontaktformular.subject.options[document.kontaktformular.subject.options.selectedIndex].value == 'Buchungsanfrage') {
document.getElementById('text').style.display = 'block';
}
}
//-->
</script>

<select name="subject" onChange="showText();">
<option value="Buchungsanfrage">Buchungsanfrage</option>
<option>Sonstiges</option>
</select>



So etwas lässt sich nur mit JavaScript (vielleicht noch mit Java) realisieren.

Einführung in JavaScript und DOM (http://de.selfhtml.org/javascript/intro.htm)

diablo
13.10.2004, 19:26:20
Ich habe das ausprobiert, aber irgendwie will es bei mir nicht funzen mit den DIV Tags. Habs mal ausprobiert und in den DIV Container nur einfachen Text gesetzt, was er auch verbirgt bzw. zeigt. Wenn ich jedoch TABLE Elmente mit rein setze geht gar nichts, dann zeigt er mir immer alles an, egal was für display eingestellt ist.
Mache ich etwas falsch oder habe ich etwas nicht beachtet?

xabbuh
13.10.2004, 20:51:52
Dann zeig doch mal den Quelltext, mit dem es funktioniert sowie den, mit dem es nicht geht.

diablo
13.10.2004, 22:43:46
Hier so wie ich es nicht geht:

<div id="text" style="display: none;" >
<tr>
<td>Personenanzahl: </td>
<td><input type='text' name='Personenanzahl' size='20'></td>
</tr>
<tr>
<td>gewünschter Zeitraum:</td>
<td><input type='text' name='Zeitraum' size='20'></td>
</tr>
<tr>
<td>Wohntyp:</td>
<td><label><input type='radio' name='Wohntyp' value='Ferienhaus'>Ferienhaus</label>
<label><input type='radio' name='Optionsschaltergruppe1' value='Ferienwohnung'>Ferienwohnung</label>
</td>
</tr>

</div>

Wenn ich so etwas mache geht es:


<tr>
<td> <div id="text" style="display: none;">Personenanzahl: </div> </td>
.....etc.

xabbuh
14.10.2004, 09:30:00
Könntest du die Seiten mal entsprechend hochladen und den Link hier reinsetzen?

diablo
14.10.2004, 14:08:06
Ich habs hinbekommen, man muss die id="text" und style="display:none" nicht in ein <div> Container setzen, sondern in den <tr> Tag von der Tabelle, dann blendet er die Zeilen aus und ein, so wie ich es wollte im Formular. Naja man lernt dazu!
Ich möchte mich aber trotzdem bei dir bedanken, das Javascript funktioniert tadellos.

xabbuh
14.10.2004, 14:16:26
Achso, wenn sich das nur auf eine Zeile beziehen soll, hast du natürlich Recht.