input van type hidden

tuxido devito · 16 feb 2008

Hallo, ik wil aan een hidden input via javascript een waarde toewijzen. Deze waarden bevat een pad naar een geselecteerd bestand en die kan spaties bevatten maar de input krijgt te de waar slechts mee tot de 1e spatie...dan kapt hij af. Hoe los ik dit op?

Code:

document.getElementById('form').innerHTML+='<input type="hidden" value="'+filepath+' />';

Egel · 16 feb 2008

Ik denk dat het opgelost is met de missende " aan het eind van de value:

Code:

document.getElementById('form').innerHTML += '<input type="hidden" value="' + filepath + '" />';

Je kunt ook alvast een hidden tekstveld neerzetten en dan daar de value van veranderen:

Code:

<form>
<input type="hidden" name="h">
</form>


document.forms[0].h.value = filepath;

Vr.Gr. Egel.

tuxido devito · 23 feb 2008

Ik heb nu een nieuw probleem, het script funtioneert opzich goed en ik zal de complete pagina even posten:

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;}

.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 forms = new Array();
 var str = '';
 for (i=1; i<=maxfiles; i++)
 {
   files[i]='';
   forms[i]='';
 }
 
 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>';
	   document.getElementById('browser').value='';	   
	   forms[i]='<input name="file'+i+'" type="hidden" value="'+filepath+'" />';
	   document.getElementById('form').innerHTML = forms.join('');
	   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]='';
   forms[i]='';
   document.getElementById('fileselection').innerHTML = '<table class="list">'+files.join('')+'</table>';
   document.getElementById('form').innerHTML = forms.join('');
   r+=1;
   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=0; i<=maxfiles; i++)
   {
     if(files[i]=='')
	 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">	  
		      <input type="file" id="browser" onchange="addfile(this.value)" size="15" />
              <span id="guide">Kies een bestand:</span>
              <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>

probleem is dat ik nu hidden inputs genereer met javascript waar de bestandslocatie instaat. Dit kan ik niet als File upload maken. Wat ik dus wil doen is de file inputs onzichtbaar maken maar nog wel actief. Ik wil ze ook kunnen verwijderen en ze dus compleet laten intergreren met het huidige grafische lijstje. Kan iemand mij daarbij helpen?

tuxido devito · 24 feb 2008

Okay ik heb nu dit:

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;}

.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=1; i<=maxfiles; i++)
 {
   files[i]='';
 }
 
 function addform()
 {
    var freerow=1;
    for (i=0; i<=maxfiles; i++)
    {
      if(files[i]=='')
	  {
	    freerow=i;
	    break 
	  }
	} 
 	var span=document.getElementById('span'+freerow);
	span.innerHTML+='<input type="file" name="browser'+i+'" id="browser'+i+'" onchange="addfile(this.value)" size="15" />';
 }
 
 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]=='')
	 {
	   addform();
	   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>';
	   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('fileselection').innerHTML = '<table class="list">'+files.join('')+'</table>';
   r+=1;
   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=0; i<=maxfiles; i++)
   {
     if(files[i]=='')
	 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 type="file" name="browser1" id="browser1" onchange="addfile(this.value)" size="15" /></span>
			  <span id="span2"></span>
			  <span id="span3"></span>
			  <span id="span4"></span>
			  <span id="span5"></span>
			  <span id="span6"></span>
			  <span id="span7"></span>
			  <span id="span8"></span>
			  <span id="span9"></span>
			  <span id="span10"></span>
			  
              <span id="guide">Kies een bestand:</span>
              <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>

en gedeeltelijk werkt dit. De file inputs blijven hun waarde behouden behalve de 1e, die word steeds gereset. Hoe los ik dit op? Verder wil ik ze graag onzichtbaar maken. Die kan volgens mij met javascript wel maar blijft hij dan nog wel actief (behoud hij zijn waarde) ?

Kan iemand mij met deze vragen helpen?

Bij voorbaat dank

Sven van de Scheur

Egel · 1 mrt 2008

Ik denk dat je het beste 10 fileinputs kunt gebruiken zoals deze:

PHP:

<span id="span1"><input type="file" name="browser1" id="browser1" onchange="addfile(this.value)" size="15" /></span>

En die één voor één zichtbaar maken om nieuwe files toe te voegen.

Zo houd je ze allemaal in een fileinput voor het versturen. Als het versturen niet lukt als ze onzichtbaar zijn hoef je ze alleen maar vlak voor het versturen zichtbaar te maken.

Vr.Gr. Egel.

input van type hidden

tuxido devito

Gebruiker

Egel

Terugkerende gebruiker

tuxido devito

Gebruiker

tuxido devito

Gebruiker

Egel

Terugkerende gebruiker

Nieuwste berichten

Wij waarderen jouw privacy