✔ Formular mit dropdown teilweise ausblenden

noch grün in JS · 4. Juli 2005

Hallo,

wie es mein Name schon sagt, bin ich noch absolut neu in JS. Habe folgendes dringendes Problem (und nach intensiver Such leider noch nicht das Passende gefunden. Bitte helft mir, ist dringend!):

Ich habe ein Formular, bei dem der User Teilnehmer für eine Veranstaltung anmelden kann (max. 10). Der User soll im Dropdown auswählen, wieviele Teilnehmer er anmelden will - und entsprechend viele Tabellen (Mit input-Feldern) werden zur Verfügung gestellt.

Am besten poste ich euch mal meine bisherigen Ergebnisse:

Code:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Test</title>
</head>
<script type="text/javascript">
function show() {
  if (document.myform.Teilnehmer_Anzahl.value=="2Teilnehmer")
    document.getElementById("1Tn").style.display="block";
  if (document.myform.Teilnehmer_Anzahl.value=="2Teilnehmer")
    document.getElementById("1Tn").style.display="block";
    document.getElementById("2Tn").style.display="block";
  if (document.myform.Teilnehmer_Anzahl.value=="3Teilnehmer")
    document.getElementById("1Tn").style.display="block";
    document.getElementById("2Tn").style.display="block";
    document.getElementById("3Tn").style.display="block";

}
</script>
<body>

<form name="myform">
<br><br>
<select name="Teilnehmer_Anzahl" size="1" onchange="javascript:show()">
<option>Bitte wählen Sie...</option>
<option value="1Teilnehmer">1 Teilnehmer</option>
<option value="2Teilnehmer">2 Teilnehmer</option>
<option value="3Teilnehmer">3 Teilnehmer</option>

</select><br><br>


<table id="1Tn" border="1" width="100%" style="display:none">
	<tr>
		<td>1. Name, Vorname</td>
		<td><input type="text" name="Beispiel" value="Bitte eintragen" size="30"></td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
</table>
<table id="2Tn" border="1" width="100%" style="display:none">
	<tr>
		<td>2. Name, Vorname</td>
		<td><input type="text" name="Beispiel" value="Bitte eintragen" size="30"></td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
</table>
<table id="3Tn" border="1" width="100%" style="display:none">
	<tr>
		<td>3. Name, Vorname</td>
		<td><input type="text" name="Beispiel" value="Bitte eintragen" size="30"></td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
</table>



</form>

</body>

</html>

DANKE FÜR EURE HILFE

Sven Mintel · 4. Juli 2005

Schau mal hier herein: http://www.tutorials.de/forum/showthread.php?p=923073#post923073

Funktioniert zwar ohne Dropdown, dürfte aber ansonsten dem nahe kommen, was du suchst.

noch grün in JS · 4. Juli 2005

Hmm, vielen Dank, aber es ist tatsächlich noch nicht, was ich suche. Ich brauche auf jeden Fall ein Dropdown Menü und außerdem müssen die Felder auch im Hintergrund vorhanden sein, damit ich in der Auswertung des Forms auch alles richtig zugeordent bekomme.

Ich glaube mein code ist schon relativ nah dran... Kann sich den vielleicht mal ein Profi anschauen...? DANKE

FredNase · 4. Juli 2005

Hi,

hab zufällig selber mal so was gebastelt.

Hab´s kurz mal angepasst....

HTML:

<html>
<head>
<title>Test</title>
</head>

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

anzahl=document.getElementById('Teilnehmer').value;

var tabellencode = '<table><tr><td>Name:</td><td>Vorname:</td></tr>';

for (i=0; i<anzahl; i++)
{
   tabellencode += "<tr><td><input type='text' name='name["+i+"]'></td><td><input type='text' name='vorname["+i+"]'></td></tr>";
}

tabellencode += "</table>";

document.getElementById('table').innerHTML = tabellencode;
document.getElementById('table').style.display = 'block';

document.getElementById('Teilnehmerzahl').value=anzahl;
}
</script>
<body>

<form name="myform">
<br><br>
<select id='Teilnehmer' name="Teilnehmer_Anzahl" size="1" onChange='javascript:show();'>
<option>Bitte wählen Sie...</option>
<option value="1">1 Teilnehmer</option>
<option value="2">2 Teilnehmer</option>
<option value="3">3 Teilnehmer</option>
<option value="4">4 Teilnehmer</option>
<option value="5">5 Teilnehmer</option>
<option value="6">6 Teilnehmer</option>
<option value="7">7 Teilnehmer</option>
<option value="8">8 Teilnehmer</option>
<option value="9">9 Teilnehmer</option>
<option value="10">10 Teilnehmer</option>

</select><br><br>
<div id='table' style='display:none;'>
</div>

<input type='submit' name='ok' value='Ok'>
<input type='hidden' name='Teilnehmerzahl'>

</form>

</body>

</html>

Grüße

noch grün in JS · 4. Juli 2005

SUPERGEIL! Danke FredNase

noch grün in JS · 5. Juli 2005

... schade jetzt ist meine gestrige Euphorie doch wieder etwas verflogen. Ich habe gemerkt, dass die Felder von meinem Formmailer nicht ausgelesen werden. Ich glaube, weil sie vom JS "dynamisch" erzeugt werden. Ich brauche wohl festdefinierte felder. Hat da jemand ne Ahnung? Vielen, vielen Dank für Eure tolle Hilfe bisher!

noch grün in JS · 8. Juli 2005

Leider komme ich einfach nicht weiter. Kann mir nochmal jemand helfen? Wäre echt super...!

Vielen Dank!

FredNase · 8. Juli 2005

Hallo,

also mit PHP kannste die dynamisch erzeugeten Felder verarbeiten.
Vielleicht kannst du ja so erst die Feldinhalte auslesen und dann an deinen Formmailer übergeben.

Code:

<html>
<head>
<title>Test</title>
</head>
<?php

for ($i=0; $i<$Teilnehmerzahl; $i++)
{
   echo "$name[$i], $vorname[$i]<br>";
}


?>

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

anzahl=document.getElementById('Teilnehmer').value;

var tabellencode = '<table><tr><td>Name:</td><td>Vorname:</td></tr>';

for (i=0; i<anzahl; i++)
{
   tabellencode += "<tr><td><input type='text' name='name["+i+"]'></td><td><input type='text' name='vorname["+i+"]'></td></tr>";
}

tabellencode += "</table>";

document.getElementById('table').innerHTML = tabellencode;
document.getElementById('table').style.display = 'block';

document.getElementById('Teilnehmerzahl').value=anzahl;
}
</script>
<body>

<form name="formular" method='post' action="<?php echo"$PHP_SELF"; ?>">
<br><br>
<select id='Teilnehmer' name="Teilnehmer_Anzahl" size="1" onChange='javascript:show();'>
<option>Bitte wählen Sie...</option>
<option value="1">1 Teilnehmer</option>
<option value="2">2 Teilnehmer</option>
<option value="3">3 Teilnehmer</option>
<option value="4">4 Teilnehmer</option>
<option value="5">5 Teilnehmer</option>
<option value="6">6 Teilnehmer</option>
<option value="7">7 Teilnehmer</option>
<option value="8">8 Teilnehmer</option>
<option value="9">9 Teilnehmer</option>
<option value="10">10 Teilnehmer</option>

</select><br><br>
<div id='table' style='display:none;'>
</div>

<input type='submit' name='ok' value='Ok'>
<input type='hidden' name='Teilnehmerzahl'>

</form>

</body>

</html>

Grüße

noch grün in JS · 8. Juli 2005

...Schön wärs...

Leider bin ich bei dieser Sache an so ein blödes ASP-Teil gebunden... Nix PHP...

noch grün in JS · 12. Juli 2005

Fast geschafft... Wo ist mein Fehler?

Hallo Leute,

inzwischen hab ichs fast geschafft: mein kleines Script blendet tatsächlich entsprechend der dem Select-Menü Zeilen ein. Problem nur: Wenn ich einmal 3 Zeilen angezeigt habe und dann wieder nur eine zeile einblenden will, springt er nicht zurück!?
Außerdem wäre es super, wenn Formularfelder in wieder ausgeblendeten Zeilen automatisch geleert würden. Kann mir jemand auf - meinem Code basierend - helfen? (Ist für Profis bestimmt kein Prob., bin halt noch Anfänger...)

Danke

Mein Code:

Code:

<html>
<head>
</head>
<script type="text/javascript">
function show() 
{
  if(document.myform.Teilnehmer_Anzahl.value=='EinTN')
    {
    document.getElementById('Tn1').style.display='block';
    }
  else if(document.myform.Teilnehmer_Anzahl.value=='ZweiTN')
    {
    document.getElementById('Tn1').style.display='block';
    document.getElementById('Tn2').style.display='block';
    }
  else if(document.myform.Teilnehmer_Anzahl.value=='DreiTN')
    {
    document.getElementById('Tn1').style.display='block';
    document.getElementById('Tn2').style.display='block';
    document.getElementById('Tn3').style.display='block';
    }
}
</script>
<body>

<form name="myform">
<br><br>
<select name="Teilnehmer_Anzahl" size="1" onChange='javascript:show()'>
<option>Bitte wählen Sie...</option>
<option value="EinTN">1 Teilnehmer</option>
<option value="ZweiTN">2 Teilnehmer</option>
<option value="DreiTN">3 Teilnehmer</option>
</select>

<br><br>


<table Id="Tn1" border="1" width="100%" style="display:none">
	<tr>
		<td>1. Name, Vorname</td>
		<td><input type="text" name="Beispiel" value="Bitte eintragen" size="30"></td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
</table>
<table Id="Tn2" border="1" width="100%" style="display:none">
	<tr>
		<td>2. Name, Vorname</td>
		<td><input type="text" name="Beispiel" value="Bitte eintragen" size="30"></td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
</table>
<table Id="Tn3" border="1" width="100%" style="display:none">
	<tr>
		<td>3. Name, Vorname</td>
		<td><input type="text" name="Beispiel" value="Bitte eintragen" size="30"></td>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
</table>



</form>

</body>

</html>

✔ Formular mit dropdown teilweise ausblenden

noch grün in JS

Grünschnabel

Sven Mintel

Mitglied

noch grün in JS

Grünschnabel

FredNase

Erfahrenes Mitglied

noch grün in JS

Grünschnabel

noch grün in JS

Grünschnabel

noch grün in JS

Grünschnabel

FredNase

Erfahrenes Mitglied

noch grün in JS

Grünschnabel

noch grün in JS

Grünschnabel

Neue Beiträge