input keert niet terug naar form

Status
Niet open voor verdere reacties.
T

tuxido devito

Gebruiker
Lid geworden
8 apr 2007
Berichten
71
Ik heb deze code

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Prototype Interface Upstream 2</title>

<style type="text/css">
body{font-family:Verdana, Arial, Helvetica, sans-serif;  font-size: small; text-align:left;}

.activebutton{background-image:url(images/tab_select.png); background-repeat:no-repeat; text-align:center;}
.activebutton:hover{cursor:pointer;}

.button{background-image:url(images/tab_default.png); background-repeat:no-repeat; text-align:center;}
.button:hover{background-image:url(images/tab_hover.png); background-repeat:no-repeat; text-align:center; cursor:pointer;}

.file{
    display:none;
}

.header{background-image:url(images/header_background.png);}
.navbar{background-image:url(images/main_background.png);}
.main{border-color:#FFFFFF;  background-image:url(images/main_background.png); background-repeat:repeat-y;}
.info{background-image:url(images/info_background.png);}
.margin{margin-left: 10px; margin-right:10px;}
.list{border-color:#FFFFFF;  background-image:url(images/main_background.png); background-repeat:repeat-y; width:100%;}
.uploadbutton{height:32px; width:80px; border-style:solid; border-width:thin; border-color:#C0C0C0; background-color:#F1F1F1;}
.uploadbutton:hover{border-color:#ACCDFF; background-color:#FFFFFF;}
.copyrightinfo{font-size:smaller; text-align:center;}
.footer{background-image:url(images/footer_background.png);}

.close{color:#FFB7B9;}
.close:hover{color:#FF0000;}

.notint{background-color:#FFFFFF;}
.notint:hover{background-color:#EEEEEE;}

.tint{background-color:#CCFF66;}
.tint:hover{background-color:#BBEE55;}
</style>
<script type="text/javascript">
 var maxfiles = 10;
 var maxchars = 55;
 var files = new Array();
 var str = '';
 for (i=0; i<=maxfiles; i++)
 {
   files[i]='';
 }
 
 function addform(i)
 {
     id=i+1;
    if (id<=maxfiles)
    {
       var browser=document.getElementById('span'+id);
      browser.style.display='inline';
    
        for (a=1; a<=maxfiles; a++)
      {
        if (!(a==id))
          {
          var browser=document.getElementById('span'+a);
          browser.style.display='none';
        }
      }
    }
    else
    {
      var browser=document.getElementById('span'+maxfiles);
      browser.style.display='none';
    }
 }
 
 function addfile(file)
 {
   filepath=file;
   if (file.length > maxchars)
   {
     d=file.length-55;
     str=file.substr(0,d);
     file='...'+file.replace(str, '');
   }
   for (i=1; i<=maxfiles; i++)
   {     
     if (files[i]=='')
     {
       if(i%2)
       files[i]='<tr id="row'+i+'" class="tint"><td width="100%" align="left">'+file+' </td><td><a class="close" id="'+i+'" href="#" onclick="removefile('+i+')">[X]</a></td></tr>';
       else
       files[i]='<tr id="row'+i+'" class="notint"><td width="100%" align="left">'+file+' </td><td><a class="close" id="'+i+'" href="#" onclick="removefile('+i+')">[X]</a></td></tr>';
       addform(i);       
       r=getfreerows();       
       if(r>0)
       document.getElementById('guide').innerHTML='U kunt nog '+r+' bestanden kiezen.';
       else
       document.getElementById('guide').innerHTML='U heeft al '+maxfiles+' bestanden gekozen.';
       break
     }    
   }
   document.getElementById('fileselection').innerHTML = '<table class="list">'+files.join('')+'</table>';
 }
 
 function removefile(i)
 {
   files[i]='';
   document.getElementById('span'+i).innerHTML='<input name="browser'+i+'" type="file" id="browser'+i+'" onchange="addfile(this.value)" size="50" />';
   addform(i-1);
   document.getElementById('fileselection').innerHTML = '<table class="list">'+files.join('')+'</table>';
   r=getfreerows();
   if(r>0)
   document.getElementById('guide').innerHTML='U kunt nog '+r+' bestanden kiezen.';
   else
   document.getElementById('guide').innerHTML='U heeft al '+maxfiles+' bestanden gekozen.';
   if(r==maxfiles)
   document.getElementById('guide').innerHTML='Kies een bestand:';
   
   var c='tint';
   for(i=1; i<=maxfiles; i++)
   {     
     if(files[i]!='')
     {
       document.getElementById('row'+i).className=c;
       if(c=='notint')
       c='tint';
       else
       c='notint';
     } 
   }
 } 
 
 function getfreerows()
 {
   var freerows=0;
   for (i=1; i<=maxfiles; i++)
   {
     if(document.getElementById('browser'+i).value=='')
     {
       freerows++;
     }
   }
   return freerows;  
 }
 
 </script>

</head>

<body>
<div align="center">
  <table cellpadding="0" cellspacing="0">
    <tr>
      <td class="header" width="480px" height="80" colspan="5"></td>
    </tr>
    <tr class="navbar">      
      <td width="96" height="32" class="activebutton" onclick="window.location='index.php'">Upload</td>
      <td width="96" height="32" class="button" onclick="window.location='regels.php'">Regels</td>
      <td width="96" height="32" class="button" onclick="window.location='contact.php'">Contact</td>
      <td width="96" height="32" class="button" onclick="window.location='disclaimer.php'">Disclaimer</td>
      <td width="96" height="32" class="button" onclick="window.location='bestanden.php'">Bestanden</td>
    </tr>
    <form id="form1" name="form1" enctype="multipart/form-data" method="post" action="">
      <tr>
        <td width="480" colspan="5" align="left">
          <div class="main" align="left">
            <div class="info">
                <br />
              <div class="margin">Welkom gebruiker:<br /><br /> 
              Klik op bladeren om  verschillende bestanden te selecteren. Gebruik de optie 'Maak .zip aan' indien u al uw bestanden wil comprimeren in 1 zip archief. Gebruik de optie 'Privé bestand'  indien u niet wil dat deden uw bestand kunnen bekijken.  Als u klaar bent drukt u op de knop 'upload' om te beginnen met uploaden.<br /><br /></div>              
            </div>
            <div class="margin">
            
              <span id="span1"><input name="browser1" type="file" id="browser1" onchange="addfile(this.value)" size="50" />
              </span>
              <span id="span2" class="file"><input name="browser2" type="file" id="browser2" onchange="addfile(this.value)" size="50" />
              </span>
              <span id="span3" class="file"><input name="browser3" type="file" id="browser3" onchange="addfile(this.value)" size="50" />
              </span>
              <span id="span4" class="file"><input name="browser4" type="file" id="browser4" onchange="addfile(this.value)" size="50" />
              </span>
              <span id="span5" class="file"><input name="browser5" type="file" id="browser5" onchange="addfile(this.value)" size="50" />
              </span>
              <span id="span6" class="file"><input name="browser6" type="file" id="browser6" onchange="addfile(this.value)" size="50" />
              </span>
              <span id="span7" class="file"><input name="browser7" type="file" id="browser7" onchange="addfile(this.value)" size="50" />
              </span>
              <span id="span8" class="file"><input name="browser8" type="file" id="browser8" onchange="addfile(this.value)" size="50" />
              </span>
              <span id="span9" class="file"><input name="browser9" type="file" id="browser9" onchange="addfile(this.value)" size="50" />
              </span>
              <span id="span10" class="file"><input name="browser10" type="file" id="browser10" onchange="addfile(this.value)" size="50" />
              </span>
              
              <div><span id="guide">Kies een bestand:</span></div>
              <span id="form"></span>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td colspan="5" align="left">
          <div id="fileselection"></div>
        </td>
      </tr>
      <tr>
        <td colspan="5" class="main">
          <br />
          <table width="100%" border="0" cellpadding="0" cellspacing="0" class="margin">
            <tr>
              <td colspan="5" align="left">Maak .zip aan</td>
              <td width="47%"><input type="checkbox" name="zip" value="1" id="zip" /></td><td width="29%" colspan="5" rowspan="2" align="center"><input type="submit" value="upload" class="uploadbutton" /></td>
            </tr>
            <tr>
              <td colspan="5" align="left">Priv&eacute; bestand</td>
              <td><input type="checkbox" name="private" value="1" id="zip" /></td>
            </tr>
            <tr>
              <td class="copyrightinfo" colspan="7">© 2008 Sven van de Scheur</td>
            </tr>
          </table>          
        </td>
      </tr>
      <tr>
        <td width="480px" height="11px" class="footer" colspan="5"></td>
      </tr>
    </form>
  </table>
</div>
</body>
</html>

In grote lijnen zorg dit er voor dat de bruiker een mooi grafisch schilletje krijgt te zien met welke bestanden hij wil uploaden terwijl de inputs niet zichtbaar wel blijven bestaan. Als ik echter een input wil 'resetten' gaat het mis. De gebruiker klikt op het kruisje wat het script removefile activeert. Deze vervangt in de <span> waar de verborgen file input staat de innerHTML om zo het formulier leeg te maken. Verder wordt dit formulier weer getoond. om zo weer een nieuwe keuze te kunnen maken. Echter word deze input dan niet meer opgenomen in het formulier. Hoe los ik dit op?

Bij voorbaat dank

Sven van de Scheur
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan