inputs genereren met jscript

Status
Niet open voor verdere reacties.

tuxido devito

Gebruiker
Lid geworden
8 apr 2007
Berichten
71
Ik wil met javascript een mogelijkheid maken om in een form inputs te genereren. De inputs moeten van het type 'file' zijn en moeten iedere keer de naam file1, file2, file3 etc... krijgen zodat ik ze kan afhandelen met php. Kan iemand mij helpen met zo'n script?
 
HTML:
<html>
  <head>
    <script language="javascript">
      var iTeller=0;
      var sTekst="";
      function veldtoevoegen(){
        iTeller++;
        sTekst=sTekst + "<br/><input type='file' name='file" + iTeller + "'>";
        document.getElementById("Extra").innerHTML=sTekst;
      }
    </script>
  </head>
  <body>
    <form name='fFiles' action='#' method='post'>
      <a href='#' onclick='veldtoevoegen();'>file-element toevoegen</a>
      <span id='extra'></span>
    </form>
  </body>
</html>
Dit zou het moeten doen...

Groetjes,
JHx.
 
Laatst bewerkt:
Volgend scriptje heeft als voordeel dat de reeds ingevulde waarden niet zullen verdwijnen bij toevoegen/verwijderen van een file-element. Het aantal mogelijke velden is beperkt, en wordt bepaald met de waarde "iMax"
HTML:
<html>
  <head>
    <script language="javascript">
      var iTeller=1;
      var iMax=10;
      function veldtoevoegen(){
        if(iTeller<=iMax){
          document.getElementById("file"+iTeller).style.display="inline";
          iTeller++;
          if(iTeller>iMax+1){iTeller=iMax+1;}
          }
      }
      function veldverwijderen(){
        if(iTeller>=1){
          iTeller--;
          if(iTeller<1){iTeller=1;}
          document.getElementById("file"+iTeller).style.display="none";
        }
      }
    </script>
  </head>
  <body>
    <form name='fFiles' action='#' method='post'>
      <a href='#' onclick='veldtoevoegen();'>file-element toevoegen</a><br>
      <a href='#' onclick='veldverwijderen();'>file-element verwijderen</a><br>
      <script language='javascript'>
        for(i=1;i<=iMax;i++){document.write("<input type='file' name='file" + i + "' id='file" + i + "'style='display:none;'><br>");}
      </script>
  </body>
</html>
 
't werkt toch niet helemaal zoals ik wel, het probleem is namelijk dat de inputs al bestaan maar niet zichtbaar zijn. Dus is de ruimte al reserveerd. Ik wil dat ze echt nog moeten komen als je op toevoegen drukt... Dit is belangrijk ivm met de interface...
 
Het probleem was niet zo zeer dat de file-elementen al bestonden, maar wel dat er telkens een <br> achter stond die wel nodig ws om de volgende mooi op de volgende lijn te krijgen, maar die niet mee onzichtbaar gemaakt werd...
Ik heb het nu zodanig aangepast dat zowel het file-element als de <br> samen in een <span>...</span> zitten, en die maak ik dan zichtbaar of onzichtbaar...
HTML:
<html>
  <head>
    <script language="javascript">
      var iTeller=1;
      var iMax=10;
      function veldtoevoegen(){
        if(iTeller<=iMax){
          document.getElementById("file"+iTeller).style.display="inline";
          iTeller++;
          if(iTeller>iMax+1){iTeller=iMax+1;}
          }
      }
      function veldverwijderen(){
        if(iTeller>=1){
          iTeller--;
          if(iTeller<1){iTeller=1;}
          document.getElementById("file"+iTeller).style.display="none";
        }
      }
    </script>
  </head>
  <body>
    <form name='fFiles' action='#' method='post'>
      <a href='#' onclick='veldtoevoegen();'>file-element toevoegen</a><br>
      <a href='#' onclick='veldverwijderen();'>file-element verwijderen</a><br>
      begin<br>
      <script language='javascript'>
        for(i=1;i<=iMax;i++){document.write("<span id='file" + i + "' style='display:none;'><input type='file' name='file" + i + "'><br></span>");}
      </script>
      einde<br>
    </form>
  </body>
</html>
 
Laatst bewerkt:
Bedankt maar waarschijnlijk heb ik het al voor elkaar kzal later ff mijn creatie posten... die werkt met divs en innhtml...
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan