Bestimmte Anzahl Textfelder einblenden

D

daniela76

Grünschnabel
Hallo zusammen,

ich habe eine Frage zu folgendem Script:
Code: 
<html> 
<head> 


 <script type="text/Javascript">
    var counter = 0;

    function moreFields() {
    	counter++;
    	var newFields = document.getElementById('teilnehmer').cloneNode(true);
    	newFields.id = '';
    	newFields.style.display = 'block';
    	var newField = newFields.childNodes;
    	for (var i=0;i<newField.length;i++) {
    		var theName = newField[i].name
    		if (theName)
    			newField[i].name = theName + counter;
    	}
    	var insertHere = document.getElementById('add');
    	insertHere.parentNode.insertBefore(newFields,insertHere);
    
    
  </script>
  
</head><body>  
  
  <div id="teilnehmer" style="display: none;">
            <table cellspacing="0" style="width:100%;">
            <tr>
              <td>Name</td>
              <td>Vorname</td>
              <td>Funktion</td>
              <td>Gebiet, Filiale</td>
              <td>Personalnr.</td>
            </tr>
            <tr> 
              <td><input type="text" name="name" style="width: 225px;" /></td>    
              <td><input type="text" name="vorname" style="width: 225px;" /></td>
              <td><input type="text" name="funktion" style="width: 225px;" /></td>
              <td><input type="text" name="gebiet" style="width: 225px;" /></td>
              <td><input type="text" name="pnummer" style="width: 225px;" /></td>
            </tr>
            <tr>                                  
            <tr>
              <td>Kostenstelle</td>
              <td>Vorabendanreise</td>
              <td>Nichtraucher</td>
              <td>Parkplatz</td>
              <td>&nbsp;</td>
            </tr>
            <tr> 
              <td><input type="text" name="kostenstelle" style="width: 225px;" /></td>    
              <td><input type="checkbox" name="anreise" /></td>
              <td><input type="checkbox" name="nichtraucher" /></td>
              <td><input type="checkbox" name="nichtraucher" /></td>
              <td>&nbsp;</td>
            </tr>
              
            </table>                           
          </div>
          <form>
          <span id="add"></span>
          <a href="javascript:moreFields();">weitere Teilnehmer hinzufügen</a>
          </form>

Ich möchte gerne das im Vorfeld schon über ein Textfeld eingegeben werden kann wie viele Teilnehmer es geben wird und diese anzahl von Feldern unten eingeblendet wird.

Javascript ist für mich totales Neuland hat jemand ein Tipp für mich

Danke und Grüße
Daniela
 
Moin,

das ginge bspw. so:
HTML: 
<html>
<head>


<script type="text/Javascript">
var counter = 0;

function addFields(n)
{
  if(isNaN(n) || n<1)return;
  for(j=0;j<parseInt(n);++j)
    {
      moreFields();
    }
}

function moreFields() 
{
  counter++;
  var newFields = document.getElementById('teilnehmer').cloneNode(true);
  newFields.id = '';
  newFields.style.display = 'block';
  var newField = (newFields.elements.length>1)?newFields.elements:[newFields.elements[0]];
  for (var i=0;i<newField.length;i++) 
    {
      if (typeof newField[i].name!='undefined')
        {
          newField[i].name+='['+counter+']';
        }
    }
  document.getElementById('add').appendChild(newFields.firstChild.cloneNode(true));
}

</script>

</head>
<body>
  <form id="teilnehmer" style="display: none;"><div>
    <table cellspacing="0" style="width:100%;">
      <tr>
        <td>Name</td>
        <td>Vorname</td>
        <td>Funktion</td>
        <td>Gebiet, Filiale</td>
        <td>Personalnr.</td>
      </tr>
      <tr>
        <td><input type="text" name="name" style="width: 225px;" /></td>
        <td><input type="text" name="vorname" style="width: 225px;" /></td>
        <td><input type="text" name="funktion" style="width: 225px;" /></td>
        <td><input type="text" name="gebiet" style="width: 225px;" /></td>
        <td><input type="text" name="pnummer" style="width: 225px;" /></td>
      </tr>
      <tr>
        <td>Kostenstelle</td>
        <td>Vorabendanreise</td>
        <td>Nichtraucher</td>
        <td>Parkplatz</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td><input type="text" name="kostenstelle" style="width: 225px;" /></td>
        <td><input type="checkbox" name="anreise" /></td>
        <td><input type="checkbox" name="nichtraucher" /></td>
        <td><input type="checkbox" name="parkplatz" /></td>
        <td>&nbsp;</td>
      </tr>
    </table>
   </div>
  </form>
  <form>
    <span id="add"></span>
  </form>
  <a style="cursor:pointer" onclick="addFields(this.firstChild.value);"><input size="2">&nbsp;weitere Teilnehmer hinzufügen</a>
</body>
</html>

Die Funktion addFields() liest die Eingabe im Textfeld aus und ruft entsprechend oft die Funktion moreFields auf.
Beachte ein paar Änderungen.... aus dem div#teilnehmer ist form#teilnehmer geworden...das erleichtert den Zugriff auf die Formularfelder beim Ändern der Namen.

Die Namen werden jetzt auch anders gesetzt...
vorher:alterNamenummer
jetzt:alterName[nummer]
...das erleichtert dir die serverseitige Verarbeitung der Formulardaten, da sie nun in Array-Form vorliegen ;)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück