Add extra images
 

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.

Re: Add extra images
 

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" />

Re: Add extra images
 

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 ?

Re: Add extra images
 

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

Re: Add extra images
 

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 :).

Re: Add extra images
 

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.

Re: Add extra images
 

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?

Re: Add extra images
 

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);

}

Re: Add extra images
 

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

Re: Add extra images
 

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);

    }