User Name Password Register
DaniWeb IT Discussion Community
Home
Forums
Tutorials
Code Snippets
Blogs
Link Directory
All
•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 423,288 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 5,334 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Join our community!
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 1593 | Replies: 15 | Solved
Reply
Page 1 of 2 1 2 >
•
•
Join Date: Feb 2008
Posts: 19
Reputation: m.cliter is an unknown quantity at this point 
Rep Power: 1
Solved Threads: 0
m.cliter m.cliter is offline Offline
Newbie Poster

Add extra images

  #1  
Feb 12th, 2008
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.
AddThis Social Bookmark Button
Reply With Quote  
•
•
Join Date: Apr 2005
Location: New York state
Posts: 464
Reputation: ShawnCplus will become famous soon enough ShawnCplus will become famous soon enough 
Rep Power: 5
Solved Threads: 72
Sponsor
ShawnCplus's Avatar
ShawnCplus ShawnCplus is offline Offline
Code Monkey

Re: Add extra images

  #2  
Feb 12th, 2008
Absolutely
Help with Code Tags
javascript Syntax (Toggle Plain Text) 
  1. function addInput(parentID)
  2. {
  3.    newInput = document.createElement('input');
  4.    newInput.type = 'file';
  5.    newInput.name = '<put name you want here>';
  6.    document.getElementByID(parentID).appendChild(newInput);
  7. }
So if you have a form such as
Help with Code Tags
html Syntax (Toggle Plain Text) 
  1. <form action="something.php" method="POST" enctype="multipart/form-data" id='imagesForm'>
You would have something along this lines
Help with Code Tags
html Syntax (Toggle Plain Text) 
  1. <input type="button" onclick="addInput('imagesForm')" value="Upload Another" />
GCS d- s+:+ a-->? C++(++++) UL+++ P+>+++ L+++ !E--- W+++
N+ o K w++(---) O? !M- V PS+>++ PE+ Y+ PGP !t- 5? X- R tv+
b+>++ DI+ D G++>+++ e+ h+>++ r z+*
Reply With Quote  
•
•
Join Date: Feb 2008
Posts: 19
Reputation: m.cliter is an unknown quantity at this point 
Rep Power: 1
Solved Threads: 0
m.cliter m.cliter is offline Offline
Newbie Poster

Re: Add extra images

  #3  
Feb 12th, 2008
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 ?
Reply With Quote  
•
•
Join Date: Apr 2005
Location: New York state
Posts: 464
Reputation: ShawnCplus will become famous soon enough ShawnCplus will become famous soon enough 
Rep Power: 5
Solved Threads: 72
Sponsor
ShawnCplus's Avatar
ShawnCplus ShawnCplus is offline Offline
Code Monkey

Re: Add extra images

  #4  
Feb 12th, 2008
whoops, sorry, lowercase d, document.getElementById(parentID).appendChild(newInput);
GCS d- s+:+ a-->? C++(++++) UL+++ P+>+++ L+++ !E--- W+++
N+ o K w++(---) O? !M- V PS+>++ PE+ Y+ PGP !t- 5? X- R tv+
b+>++ DI+ D G++>+++ e+ h+>++ r z+*
Reply With Quote  
•
•
Join Date: Feb 2008
Posts: 19
Reputation: m.cliter is an unknown quantity at this point 
Rep Power: 1
Solved Threads: 0
m.cliter m.cliter is offline Offline
Newbie Poster

Re: Add extra images

  #5  
Feb 12th, 2008
thanks its working now.
the result that I want should be like this
Help with Code Tags 
      <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
Help with Code Tags 
    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 .
Reply With Quote  
•
•
Join Date: Apr 2005
Location: New York state
Posts: 464
Reputation: ShawnCplus will become famous soon enough ShawnCplus will become famous soon enough 
Rep Power: 5
Solved Threads: 72
Sponsor
ShawnCplus's Avatar
ShawnCplus ShawnCplus is offline Offline
Code Monkey

Re: Add extra images

  #6  
Feb 12th, 2008
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.
GCS d- s+:+ a-->? C++(++++) UL+++ P+>+++ L+++ !E--- W+++
N+ o K w++(---) O? !M- V PS+>++ PE+ Y+ PGP !t- 5? X- R tv+
b+>++ DI+ D G++>+++ e+ h+>++ r z+*
Reply With Quote  
•
•
Join Date: Feb 2008
Posts: 19
Reputation: m.cliter is an unknown quantity at this point 
Rep Power: 1
Solved Threads: 0
m.cliter m.cliter is offline Offline
Newbie Poster

Re: Add extra images

  #7  
Feb 12th, 2008
•
•
•
•
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?
Help with Code Tags 
      t.appendChild(r);
      r.appendChild(ca);
      r.appendChild(cb);
      ca.appendChild(newInput);
      cb.appendChild(newInput);
I did this and I got nothing?
Reply With Quote  
•
•
Join Date: Apr 2005
Location: New York state
Posts: 464
Reputation: ShawnCplus will become famous soon enough ShawnCplus will become famous soon enough 
Rep Power: 5
Solved Threads: 72
Sponsor
ShawnCplus's Avatar
ShawnCplus ShawnCplus is offline Offline
Code Monkey

Re: Add extra images

  #8  
Feb 12th, 2008
I'm not entirely sure what the extra TD is for but this is what it should look like
Help with Code Tags
javascript Syntax (Toggle Plain Text) 
  1. function addInput(parentID)
  2. {
  3.        newInput = document.createElement('input');
  4.        newInput.type = 'file';
  5.        newInput.name = 'photo';
  6.        var parent  = document.getElementById(parentID);
  7.        var row  = document.createElement('tr');
  8.        var td1 = document.createElement('td');
  9.  
  10.        parent.appendChild(row);
  11.        row.appendChild(td1);
  12.        td1.appendChild(newInput);
  13. }
Last edited by ShawnCplus : Feb 12th, 2008 at 10:34 pm.
GCS d- s+:+ a-->? C++(++++) UL+++ P+>+++ L+++ !E--- W+++
N+ o K w++(---) O? !M- V PS+>++ PE+ Y+ PGP !t- 5? X- R tv+
b+>++ DI+ D G++>+++ e+ h+>++ r z+*
Reply With Quote  
•
•
Join Date: Feb 2008
Posts: 19
Reputation: m.cliter is an unknown quantity at this point 
Rep Power: 1
Solved Threads: 0
m.cliter m.cliter is offline Offline
Newbie Poster

Re: Add extra images

  #9  
Feb 12th, 2008
Thanks, It's working on opera and FF but not in IE7, do you know why?
and thanks again for your replies
Reply With Quote  
•
•
Join Date: Feb 2008
Posts: 19
Reputation: m.cliter is an unknown quantity at this point 
Rep Power: 1
Solved Threads: 0
m.cliter m.cliter is offline Offline
Newbie Poster

Re: Add extra images

  #10  
Feb 12th, 2008
this Code work great on FF but not in IE
Help with Code Tags 
    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);
    }
Reply With Quote  
Reply
Page 1 of 2 1 2 >

•
•
•
•

Only community members can participate in forum threads. You must register or log in to contribute.

Register
•
•
•
•
•
•
•
•
DaniWeb JavaScript / DHTML / AJAX Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

 

•
•
•
•
Thread Tools Display Modes
Hybrid Mode Hybrid Mode

•
•
•
•
preventing the delay when src attribute of the images set via javascript
Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum

Advertising Opportunities on DaniWeb
Contact Us - Newsletter Archive - Sitemap - Privacy Statement
All times are GMT -4. The time now is 10:43 am.
Forum system based on vBulletin Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC