25 chars of wasted space.
|
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. |
quote |
Member
|
You're going to want a couple buttons/links and onclick() you're going to want to add/remove input boxes from the DOM.
|
quote |
25 chars of wasted space.
|
Ooops, horribly wrong forum. Guess I clicks on the wrong thing
|
quote |
25 chars of wasted space.
|
Quote:
|
|
quote |
Member
|
How much do you know about editing the DOM with Javascript?
|
quote |
25 chars of wasted space.
|
Assume I know nothing.
|
quote |
Member
|
The easiest way to do this is probably going to be something like this: http://www.w3schools.com/js/tryit.as...able_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: [PHP]<table id="upload_table"></table>[/PHP] And you want to add a row and add an upload box to it. The code would look something like: Code:
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. |
quote |
25 chars of wasted space.
|
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
|
quote |
Member
|
Table object have an array of rows: http://www.w3schools.com/htmldom/dom_obj_table.asp
So you could accomplish this simply by: Code:
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 + ']">')
} |
quote |
25 chars of wasted space.
|
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 |
quote |
Member
|
Hmm.. that actually works correctly in Gecko-based browsers. I'm guessing it's a bug in Safari.
|
quote |
Posting Rules | Navigation |
|
Thread Tools | |
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Quick ways to add album art to iTunes? | ezkcdude | Genius Bar | 10 | 2006-07-30 21:37 |
Final Cut Express - How do I add a good Soft Focus? | Gizzer | Genius Bar | 0 | 2005-11-28 08:03 |
Some javascript "point me in the right direction" | Wrao | Programmer's Nook | 8 | 2005-07-17 09:07 |
Safari: Controlling movies with javascript | ast3r3x | Genius Bar | 0 | 2005-04-16 20:14 |
Does anyone Know how to add Text to idvd productions? | zman2005 | General Discussion | 1 | 2005-03-19 13:36 |