Add extra images

•

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 373,931 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 3,277 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

Thread Tools Display Modes

Views: 1438 | Replies: 15 | Solved

Page 2 of 2

•

Join Date: Apr 2005

Location: New York state

Posts: 442

Reputation: ShawnCplus will become famous soon enough

Rep Power: 5

Solved Threads: 65

ShawnCplus ShawnCplus is offline

Offline

Code Monkey

Re: Add extra images

#11

Feb 12th, 2008

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

 Help with Code Tags 
 javascript Syntax (Toggle Plain Text) 
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);
}
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

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<table>
   <tr id='row1'>
      <td>
           <input type="button" onclick="addInput('rowID')" value="Upload Another" />
      </td>
   </tr>
</table>
<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.

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+*

•

Join Date: Feb 2008

Posts: 19

Reputation: m.cliter is an unknown quantity at this point

Rep Power: 1

Solved Threads: 0

m.cliter

Offline

Newbie Poster

Re: Add extra images

#12

Feb 12th, 2008

The code gives me an error after changing this

Help with Code Tags

(Toggle Plain Text)

var parent = document.getElementById(parentID);

to this

Help with Code Tags

(Toggle Plain Text)

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

•

Join Date: Feb 2008

Posts: 19

Reputation: m.cliter is an unknown quantity at this point

Rep Power: 1

Solved Threads: 0

m.cliter

Offline

Newbie Poster

Re: Add extra images

#13

Feb 13th, 2008

I want to do something like this

Help with Code Tags

(Toggle Plain Text)

      <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

Help with Code Tags

(Toggle Plain Text)

 
   function addInput(parentID)
    {
      var parent  = document.getElementById(parentID);
      // the first row
      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");


      //second row
      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 )?

•

Join Date: Feb 2008

Posts: 19

Reputation: m.cliter is an unknown quantity at this point

Rep Power: 1

Solved Threads: 0

m.cliter

Offline

Newbie Poster

Re: Add extra images

#14

Feb 13th, 2008

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.

•

Join Date: Apr 2005

Location: New York state

Posts: 442

Reputation: ShawnCplus will become famous soon enough

Rep Power: 5

Solved Threads: 65

ShawnCplus ShawnCplus is offline

Offline

Code Monkey

Re: Add extra images

#15

Feb 13th, 2008

Help with Code Tags

(Toggle Plain Text)

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

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+*