Win a copy of Five Lines of Code this week in the OO, Patterns, UML and Refactoring forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Bear Bibeault
  • Ron McLeod
  • Jeanne Boyarsky
  • Paul Clapham
Sheriffs:
  • Tim Cooke
  • Liutauras Vilda
  • Junilu Lacar
Saloon Keepers:
  • Tim Moores
  • Stephan van Hulst
  • Tim Holloway
  • fred rosenberger
  • salvin francis
Bartenders:
  • Piet Souris
  • Frits Walraven
  • Carey Brown

Javascript Problem While Displaying In IE

 
Ranch Hand
Posts: 56
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
<html>
<head>
</head>
<body>
<select name="upload" id="Uploads" onChange="muluploads()">
<option value="0">Number Of Uploads-0</option>
<option value="1">1 Upload</option>
<option value="2">2 Uploads</option>
<option value="3">3 Uploads</option>
<option value="4">4 Uploads</option>
<option value="5">5 Uploads</option>
<option value="6">6 Uploads</option>
<option value="7">7 Uploads</option>
<option value="8">8 Uploads</option>
<option value="9">9 Uploads</option>
<option value="10">10 Uploads</option>
<option value="11">11 Uploads</option>
<option value="12">12 Uploads</option>
<option value="13">13 Uploads</option>
<option value="14">14 Uploads</option>
<option value="15">15 Uploads</option>
<option value="16">16 Uploads</option>
<option value="17">17 Uploads</option>
<option value="18">18 Uploads</option>
<option value="19">19 Uploads</option>
<option value="20">20 Uploads</option>
</select>
<script language="JavaScript">
function muluploads()
{
newnum=document.getElementById('Uploads').value;
//alert(newnum);
trarray=document.getElementsByName('uploadtr');
oldnum=trarray.length;
if (newnum>=oldnum )
{
currentnum=newnum-oldnum;
for (i=1;i<=currentnum;i++)
{
var tr = document.createElement('tr');
tr.setAttribute('name', 'uploadtr');
var td = document.createElement('td');
td.innerHTML = '<input type="file" name="file[]">';
tr.appendChild(td);
document.getElementById('upload-table').appendChild(tr);
}
}
else
{
deletenum= oldnum-newnum;
for (i=1;i<=deletenum;i++)
{
document.getElementById('upload-table').removeChild(document.getElementById('upload-table').lastChild);
}
}
//alert(document.getElementById('upload-table').innerHTML);
}
</script>
<table id="upload-table">

</table>

</body>
</html>

The above Code is used display select box based on the onchange that will give us number file uploads(Like input type="file"), it's working fine for firefox but not in IE,
please help me about this.

thank you
 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
make sure that the name and id are the same.

Eric
 
Greenhorn
Posts: 28
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
hi


alert(document.getElementById('upload-table').innerHTML);


good move! so, what do you see when this line is uncommented...?
I've seen: "<tbody></tbody><tr><td>.....</td></tr>" as innerHtml...
and after very exciting reading of How to Build Tables Dynamically (the last example)
I added <tbody> to the structure of your table...

Originally posted by Eric Pascarello:
make sure that the name and id are the same.



aha, it's a next problem...so, new rows have ID and NAME set
to avoid empty result of getElementsByName() function...



it worked in IE6 and Mozilla 1.7.3,
now, please verify this script in Firefox...

regards,
Natasza
[ November 02, 2006: Message edited by: Natasza Biecek ]
 
chsanthosh kumar
Ranch Hand
Posts: 56
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thank You Natasza it's working fine,
but i did in different manner please take look at into this,

<html>
<head>
<title tal:content="template/title">Uploads</title>
</head>
<body>

<form action="muluploads_py" method="post" name="uploads" id="uploads" enctype="multipart/form-data">
<select name="upload" id="Uploads" onChange="changeuploads()">
<option value="0">Number Of Uploads-0</option>
<option value="1">1 Upload</option>
<option value="2">2 Uploads</option>
<option value="3">3 Uploads</option>
<option value="4">4 Uploads</option>
<option value="5">5 Uploads</option>
<option value="6">6 Uploads</option>
<option value="7">7 Uploads</option>
<option value="8">8 Uploads</option>
<option value="9">9 Uploads</option>
<option value="10">10 Uploads</option>
<option value="11">11 Uploads</option>
<option value="12">12 Uploads</option>
<option value="13">13 Uploads</option>
<option value="14">14 Uploads</option>
<option value="15">15 Uploads</option>
<option value="16">16 Uploads</option>
<option value="17">17 Uploads</option>
<option value="18">18 Uploads</option>
<option value="19">19 Uploads</option>
<option value="20">20 Uploads</option>
</select>
<script type="text/javascript">
function changeuploads(){
newnum=document.getElementById("Uploads").value;
var newHTML="<TABLE>";
for(i=1;i<=newnum;i++){
newHTML = newHTML + '<input type="file" name="file_'+i+'"><br>';
}
if(newnum>0) {

newHTML = newHTML + '</TABLE><input type="submit">';
}else{

newHTML = newHTML;
}
document.getElementById("mulup").innerHTML = newHTML;
}
</script>

<SPAN ID="mulup"></SPAN>
</form>

</body>
</html>
 
Natasza Biecek
Greenhorn
Posts: 28
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
wow!
It looks so nice but...it doesn't work in my IE
of course there's hope it's something wrong with my M$ browser....but let's assume that not,
so, I did small test: at the beginning of changeuploads() function I added:
alert ( document.getElementById("uploads").tagName )
my IE showed 'FORM' (excuse me?) but Mozilla: 'SELECT' (uff...)
The first: please, use unique names and id-s...I changed id/name of your form adding '_form' suffix.
The second: construction of a table.
When user selects required number of uploads the innerHTML of 'mulup' span will be:
<TABLE><input type="file" name="file_1"<br>......</TABLE><input type="submit">
ooops...?
So, in my opinion, it would be better to do small redesign of this code, it means: to write
simple function returning full content of one row, then to invoke this function as many times
as required. In this way you will generate let's say - interior - of your table.
Finally, <table>,</table> tags and submit button have to be added.
Of course, you can append tr/td/input tags directly in a loop....but when you separate this piece of code
it will be a little bit easier to modify design of this table ( f.e. to set different colors for even/odd rows, etc..)

And the last one...it's a hint only: instead of typing <option value=.....></option> twenty times,
you can use a loop...by the way, you can control max number of uploads, because
value of maxUploads variable may be set dynamically during page generation

Here you have code:


regards,
Natasza
 
Slime does not pay. Always keep your tiny ad dry.
Building a Better World in your Backyard by Paul Wheaton and Shawn Klassen-Koop
https://coderanch.com/wiki/718759/books/Building-World-Backyard-Paul-Wheaton
    Bookmark Topic Watch Topic
  • New Topic