[SOLVED] JavaScript creating table rows not working

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
kaYak
Forum Commoner
Posts: 65
Joined: Mon Feb 02, 2004 2:43 pm
Location: USA

[SOLVED] JavaScript creating table rows not working

Post by kaYak »

Hello,

I have this page that I made. You enter the number of files you want to upload and it creates that number of file inputs on the page. When you change the number to a bigger number than before it should add rows to the table. For some reason it is not working properly. Here is the code:

Code: Select all

<html>

<head>

</head>

<body>

<script>

function create_input(){

var nf = document.getElementById('num_files').value;
var inp_cont = "";

if(nf > 20){

error_alert = alert("Sorry! You can only upload a maximum of 20 files at one time.");

}
else{

var numh = document.getElementById('num_holder').value;
numh = parseInt(numh);

var num_now = parseInt(nf) - numh;

for (i = numh; i <= num_now; i++)
{

ff = i;

var x = document.getElementById('upload_list').insertRow(ff);
var y = x.insertCell(0);
var z = x.insertCell(1);
y.innerHTML = 'File ' + (numh + i) + ': ';
z.innerHTML = '<input type="file" name="f_' + i + '">';

}

document.getElementById('num_holder').value = parseInt(nf);

}

return true;

}
</script>

<table>

<tr>
<td>

<form action="" method="post" id="tform" onSubmit="create_input(); return false;">

How many files would you like to upload? <input type="text" id="num_files" value="1"/> <input type="submit" value="OK" />

<input type="hidden" id="num_holder" value="1"/>

<a href="javascript:alert(document.getElementById('num_holder').value);">Test</a>

</form>

<br />
<br />

<form enctype="multipart/form-data" action="index.php?action=upload2" method="POST">

    <input type="hidden" name="MAX_FILE_SIZE" value="{$max_size}" />

<table id="upload_list">

<tr><td>File 1: </td><td><input type="file" name="f_1"></td></tr>

</table>

<br />
<br />

<input type="submit" value="Upload Files" />

</form>

</td>
</tr>

</table>

</body>

</html>
Does anyone see any reason why this isn't working properly?

Thanks in advance,
Kyle
Last edited by kaYak on Sat Aug 06, 2005 8:36 am, edited 1 time in total.
User avatar
anjanesh
DevNet Resident
Posts: 1679
Joined: Sat Dec 06, 2003 9:52 pm
Location: Mumbai, India

Post by anjanesh »

It doesnt enter the loop when when the difference is smaller than the current number of rows. If you increase from 5 to 7, the diff is 2 and so it doesnt enter the loop because your loop was 5 to 2 when it should have been 5 to 5+2.

Code: Select all

function create_input()
 {
        var nf = document.getElementById('num_files').value;
        var inp_cont = "";
        if(nf > 20)
         {
                error_alert = alert("Sorry! You can only upload a maximum of 20 files at one time.");
         }
        else
         {
                var numh = document.getElementById('num_holder').value;
                numh = parseInt(numh);
                var num_now = parseInt(nf) - numh;
        
                for (i = numh; i <= numh + num_now - 1; i++)
                 {
                        ff = i;
                        var x = document.getElementById('upload_list').insertRow(ff);
                        var y = x.insertCell(0);
                        var z = x.insertCell(1);
                        y.innerHTML = 'File ' + i + ': ';
                        z.innerHTML = '<input type="file" name="f_' + i + '">';
                 }
                document.getElementById('num_holder').value = parseInt(nf);
        
         }
 return true;
 }
kaYak
Forum Commoner
Posts: 65
Joined: Mon Feb 02, 2004 2:43 pm
Location: USA

Thank you very much

Post by kaYak »

Thank you very much Anjanesh. Now I am off to see if I can make it delete rows when I enter in a smaller number than what is kept in the holding variable. :D

Let's see where I get with that.
User avatar
anjanesh
DevNet Resident
Posts: 1679
Joined: Sat Dec 06, 2003 9:52 pm
Location: Mumbai, India

Post by anjanesh »

Code: Select all

for (i = numh; i > nf; i--)
 {
        // Delete Row
 }
kaYak
Forum Commoner
Posts: 65
Joined: Mon Feb 02, 2004 2:43 pm
Location: USA

Post by kaYak »

Thank you again. I used your second bit of code as well. I'm 14 so these greater than/less than things take me some time to comprehend. I have to think for awhile and I get confused having 4 different things I could change. I had to subtract 1 from the row index in the delete loop so it would work properly.

Thanks for your help! :D
Post Reply