Help me add content with javascript! Please?

[ast3r3x]

So I can do basic stuff with javascript, but one thing I've never been able to get to work is adding content. I want to make a web gallery for pictures and I really like gmail's method when you want to attach files.

Basically it's a link that runs a js and it creates an input type for files. Then there is another link that can you can click and it adds another one…and another…and another as needed. Of course you can remove stuff too, and add others without losing what you've done before. I know this shouldn't be as hard as it is, but I just don't get it.

Anyone care to help? Or if you have a more elegant solution I'd be interested as well. Thanks, this is driving me crazy.

[pmazer]

You're going to want a couple buttons/links and onclick() you're going to want to add/remove input boxes from the DOM.

[ast3r3x]

Ooops, horribly wrong forum. Guess I clicks on the wrong thing:o

[ast3r3x]

You're going to want a couple buttons/links and onclick() you're going to want to add/remove input boxes from the DOM.
Yeah...but HOW? I mean I know onclick() and I use them for other things, but I don't know how to specifically add content to a specific part of the page...even without using onclick and just having it run when the page is loaded.

[pmazer]

How much do you know about editing the DOM with Javascript?

[ast3r3x]

Assume I know nothing.

[pmazer]

The easiest way to do this is probably going to be something like this: http://www.w3schools.com/js/tryit.asp?filename=try_dom_table_insertrow

You're going to want to create a table for the uploads, and add and delete rows from it, and then access those rows to add the file upload box and remove link.

For example, say you have this code:

<table id="upload_table"></table>

And you want to add a row and add an upload box to it. The code would look something like:


var total_upload=0;

function addUpload() {
var row = document.getElementById('upload_table').insertRow( 0);
cell = row.insertCell(0);
cell.innerHTML('<input type="file" id="upload' + total_upload + '">')
total_upload += 1;
}


I hope you can see what I'm doing.

[ast3r3x]

Yeah I got it...that paged helped a lot, I got it working. However now I have the question of how do I add it to the end of the table? I will also be working tomorrow on removing rows, but I think I can handle that, if not this thread will be revived ;)

[pmazer]

Table object have an array of rows: http://www.w3schools.com/htmldom/dom_obj_table.asp

So you could accomplish this simply by:


function addUpload() {
var table = document.getElementById('upload_table');
var row = table.insertRow(table.rows.length);
var cell = row.insertCell(0);
cell.innerHTML('<input type="file" id="upload[' + table.rows.length + ']">')
}

[ast3r3x]

Hmm...that didn't work for me, it still added it to the top.

It works like it is supposed to if I do the length -1...it puts it at the 2nd to last spot, but it doesn't seem to work if it is the last spot. www.swigg.net

[pmazer]

Hmm.. that actually works correctly in Gecko-based browsers. I'm guessing it's a bug in Safari.