Check alle échte Black Friday-deals Ook zo moe van nepaanbiedingen? Wij laten alleen échte deals zien
Toon posts:

file input wist zichzelf

Pagina: 1
Acties:
  • 380 views

Verwijderd

Topicstarter
ik heb deze code

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
<!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>


Als ik nu een file input van waarde verandert komt er een nieuwe. Uiteindelijk is de bedoeling dat de oude onzichtbaar wordt. Maar de 1e wist zichzelf als je een bestand selecteerd. Daarna blijven de waardes behouden (bij input 2,3,4,5,6,7,8,9,10 dus). Hoe komt dit en hoe los ik dit op?

  • Ramon
  • Registratie: Juli 2000
  • Laatst online: 21:02
Misschien omdat de eerste en tweede input allebei dezelfde id en name hebben?

(bij mij op firefox iig)

[ Voor 18% gewijzigd door Ramon op 24-02-2008 17:54 ]

Check mijn V&A ads: https://tweakers.net/aanbod/user/9258/


  • Tanuki
  • Registratie: Januari 2005
  • Niet online
Ik denk dat dit komt omdat je de innerHTML overschrijft.

Je zou het eens met de DOM functies, en dan met name appendChild(), kunnen proberen.

PV: Growatt MOD5000TL3-XH + 5720wp, WPB: Atlantic Explorer v4 270LC, L/L: MHI SCM 125ZM-S + SRK 50ZS-W + 2x SRK 25ZS-W + SRK 20ZS-W Modbus kWh meter nodig?


Verwijderd

Topicstarter
ik heb nu dit
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
<!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>

En het bestand selecteren gaat goed. Alleen als ik nu een bestand wil wissen word de innerHTML van een span aangepast voor een nieuwe file input. Deze wordt echter niet opgenomen in het form. Hoe komt dit en hoe los ik dit op?

Bij voorbaat dank.

  • RobIII
  • Registratie: December 2001
  • Niet online

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

(overleden)
Zo werkt het hier niet; het is hier niet de bedoeling aan lap code neer te plempen en dat wij het dan wel even voor je oplossen. Als je code post, post dan de relevante delen. Daarbij zien we graag wat je al hebt geprobeerd, gezocht en gevonden en waar je zelf denkt dat het probleem ligt; kort samengevat zien we dus graag wat eigen inzet en dat bespeur ik hier in dit topic helaas niet. Daarom gaat dit topic dan ook op slot. Neem even een kijkje in onze Quickstart en lees hoe we hier graag topics zien ;)

Daar ben je inmiddels overigens vaak genoeg op gewezen; doe er eens iets mee. GoT is geen afhaalbalie voor kant-en-klare oplossingen.

[ Voor 9% gewijzigd door RobIII op 24-02-2008 21:36 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij


Dit topic is gesloten.