Add extra images

[m.cliter]

Hi,
I m new to JavaScript. And I have a webpage where a user can upload 5 images. so I have five input tags, but I want to give him add extra image option,when a user hit add extra image a new input tag appeare.
how can I do that using Javascript?
Thanks in advance.

[ShawnCplus]

Absolutely

function addInput(parentID)
{
   newInput = document.createElement('input');
   newInput.type = 'file';
   newInput.name = '<put name you want here>';
   document.getElementByID(parentID).appendChild(newInput);
}

So if you have a form such as

<form action="something.php" method="POST" enctype="multipart/form-data" id='imagesForm'>

You would have something along this lines

<input type="button" onclick="addInput('imagesForm')" value="Upload Another" />

[m.cliter]

thanks for your reply.
I ve tried your solution but the function gives an error, the error message point to this line
document.getElementByID(parentID).appendChild(newInput);
any hint ?

[ShawnCplus]

whoops, sorry, lowercase d, document.getElementById(parentID).appendChild(newInput);

[m.cliter]

thanks its working now.
the result that I want should be like this

<tr>
       <td width="150">foto 1:</td>
       <td width="250"><input type="file" name="foto1" size="30" /></td>
      </tr>
      <tr>
       <td width="150">Description:</td>
       <td width="250"><input type="text" name="description1" size="30" /></td>
      </tr>

I m reading some tutorials now, to get the code above i ve treid so far this

function addInput(parentID)
    {
       newInput = document.createElement('input');
       newInput.type = 'file';
       ewInput.name = 'foto';
       var r  = document.createElement('tr');
       var ca = document.createElement('td');
       var cb = document.createElement('td');
       var t  = document.getElementById(parentID);
      
      ca.appendChild(newInput);
      cb.appendChild(newInput);
      
      r.appendChild(ca);
      r.appendChild(cb);
       
      t.appendChild(r);

    }

I can't get the code run, but I m working on this, any help well be approciated :).

[ShawnCplus]

You might want to use a bit more descriptive names. Also, it's not working because you aren't first appending ca (the td) to anything. You must first append the new row (r) to t(parent) then append ca to r, and so on.

[m.cliter]

it's not working because you aren't first appending ca (the td) to anything. You must first append the new row (r) to t(parent) then append ca to r, and so on.

all do i have just reverse the order?

t.appendChild(r);
      r.appendChild(ca);
      r.appendChild(cb);
      ca.appendChild(newInput);
      cb.appendChild(newInput);

I did this and I got nothing?

[ShawnCplus]

I'm not entirely sure what the extra TD is for but this is what it should look like

function addInput(parentID)
{
       newInput = document.createElement('input');
       newInput.type = 'file';
       newInput.name = 'photo';
       var parent  = document.getElementById(parentID);
       var row  = document.createElement('tr');
       var td1 = document.createElement('td');
      
       parent.appendChild(row);
       row.appendChild(td1);
       td1.appendChild(newInput);
}

[m.cliter]

Thanks, It's working on opera and FF but not in IE7, do you know why?
and thanks again for your replies :)

[m.cliter]

this Code work great on FF but not in IE

function addInput(parentID)
    {
      newInput = document.createElement('input');
      newInput.type = 'file';
      newInput.name = 'foto';
      var parent  = document.getElementById(parentID);
      var row1  = document.createElement('tr');

      var td1 = document.createElement('td');
      td1.setAttribute("width","150");
      var txt = document.createTextNode("foto2");
      ;

      var td2 = document.createElement('td');
      td2.setAttribute("width","250");

      parent.appendChild(row1);
      row1.appendChild(td1);
      row1.appendChild(td2);
      td1.appendChild(txt)
      td2.appendChild(newInput);
    }

[ShawnCplus]

IE seems to create a tbody element after <table> so attempting to add the tr to the <table> tag will not work so we have to get the parent element then get the parent of that

function addInput(parentID)
{
       newInput = document.createElement('input');
       newInput.type = 'file';
       newInput.name = 'photo';
       var parent = document.getElementById(parentID).parent;
       var row  = document.createElement('tr');
       var td1 = document.createElement('td');
      
       parent.appendChild(row);
       row.appendChild(td1);
       td1.appendChild(newInput);
}

So no we do something like this

<table>
   <tr id='row1'>
      <td>
           <input type="button" onclick="addInput('rowID')" value="Upload Another" />
      </td>
   </tr>
</table>

This is a wee bit kludgey but it gets the job done.

[m.cliter]

The code gives me an error after changing this

var parent = document.getElementById(parentID);

to this

var parent = document.getElementById(parentID).parent;

it's 04:12am here I have to go to seelp, I ll be here at moorning:d
Thanks again

[m.cliter]

I want to do something like this

<tr>
       <td width="150">foto 1:</td>
       <td width="250"><input type="file" name="foto1" size="30" /></td>
      </tr>
      <tr>
       <td width="150">Description:</td>
       <td width="250"><input type="text" name="description1" size="30" /></td>
      </tr>

Here is my code

function addInput(parentID)
    {
      var parent  = document.getElementById(parentID);
      [I]// the first row[/I]
      newInputFile = document.createElement('input');
      newInputFile.type = 'file';
      newInputFile.name = 'foto2';
      newInputFile.size = '30';
      var parent  = document.getElementById(parentID);
      var txt1 = document.createTextNode("foto2");
      var row1  = document.createElement('tr');

      var td1 = document.createElement('td');
      td1.setAttribute("width","150");
      var td2 = document.createElement('td');
      td2.setAttribute("width","250");


      [I]//second row[/I]
      newInputTxt = document.createElement('input');
      newInputTxt.type = 'text';
      newInputTxt.name = 'description2';
      newInputTxt.size = '30';
      var txt2 = document.createTextNode("Description2");
      var row2  = document.createElement('tr');
      var td3 = document.createElement('td');
      td3.setAttribute("width","150");
      var td4 = document.createElement('td');
      td4.setAttribute("width","250");

      parent.appendChild(row1);
      parent.appendChild(row2);
      row1.appendChild(td1);
      row1.appendChild(td2);
      row2.appendChild(td3);
      row2.appendChild(td4);
      td1.appendChild(txt1);
      td2.appendChild(newInputFile);
      td3.appendChild(txt2);
      td4.appendChild(newInputTxt);
    }

this code works fine on FF and opera, but nothing happened in IE7/6.
also is there anyway to change the name of input everytime( maybe using static var )?

[m.cliter]

Now, the code run fine on IE7/6, I got help from sitepoint, and I quote

What's happening is that when IE parses the HTML code and sees a table, IE automatically inserts the TBODY element that should be there. When a table is given to the page via javascript, IE doesn't automatically check it, so if the TBODY element is missing from the javascript provided table, IE just ignores it completely.

This is the reasoning behind why table rows should be contained inside a TBODY element, with that TBODY element inside the TABLE element.

And yes, you can blame IE for this. The specs say that TBODY is optional when there is no header or footer in the table.

ShawnCplus said the same but I didn't understand him .
one more thing, is there anyway to make those names dynamique? because the user can hit the button more then once, the result is too many input have the same name.

[ShawnCplus]

var numInputs = 0;
function addInput(){
...
newInput.name = "upload"+parseInt(numInputs);
numInputs++;
...
}

[m.cliter]

Thanks for your help. Everything is ok now.