Repeat block using javascript

Javascript

[durgasatya]

Hi
am new to javascript. i have a task to repeat the below code block when the user clicks + symbol so as to enable the user to enter another item details and also to provide to delete when clicks on - symbol in a JSP. i have written javascript function. but not able to get the functionality required..Pls correct me where am wrong and kindly help me out as i was given a deadline for this..

thank you all
Durga Satya


function addItem(div)
{

var ediv=document.getElementById(div);
var temp=ediv.innerHTML;
var newdiv = document.createElement('div');
var divIdName=div+1;//i hav taken 1 for sample for adding id to the div
newdiv.setAttribute('id',divIdName);
newdiv.innerHTML =temp;
ediv.appendChild(newdiv);


}


//HTML Block to be repeated.

<div id="Item1">

<TR>
<TD width="200" rowspan="3" valign="top"><STRONG>Item1:<%=lStrFromPage%></STRONG><span style="color: #ff0000">*</span>
<input type="button" name="" id="" value="+" onclick="javascript:addItem('Item1');" style="20;" class="FieldBlack"></input>
<input type="button" name="" id="" value="-" onclick="" style="20;visibility:hidden}" class="FieldBlack"></input>
</TD>


<TD width="130">Make :</TD>
<TD width="270"><INPUT id="Text1" type="text" name="Item_Make" value='<%=make%>' <%=isDisable%>> </TD>
</TR>

<TR >
<TD>Model :</TD>
<TD><INPUT id="Text2" type="text" name="Item_Model" value='<%=model%>' <%=isDisable%>></TD>
</TR>

<TR>
<TD>Sl No:</TD>
<TD><INPUT id="Text3" type="text" name="Item_SerialNo" value='<%=serialNo%>' <%=isDisable%>></TD>
</TR>
</div>

[morehawes]

I can't try out your code right now but just for starters you need to change :

var ediv=document.getElementById(div);

to

var ediv=document.getElementById('Item1');

You need to pass the acual ID of the div as a string to Javascript.

Let me know how you get on.

[Fotiman]

@morehawes, notice that the 'Item1' value is being passed as the div variable:
javascript:addItem('Item1');
So no change required there.

@durgasatya, welcome to WebmasterWorld. Here's what I notice:

1. Your HTML is invalid. You have table elements <tr> inside of a <div> element. <tr> can only exist inside of certain table elements. Try validating your HTML to eliminate these errors.

2. Remove the "javascript:" portion of the onclick handler. It should just be:
onclick="addItem('Item1');"

3. Your code works to some extent. The problem, though, is that you're appending each new copy as a child of the original, so each time you create a copy, you're going to double the total rather than appending a single copy.

4. You'll need your input items to have unique id's as well. If you copy the innerHTML, you're going to end up with multiple input fields with the ids "Text1", "Text2", and "Text3".

The first problem you should fix is getting your markup to be valid (ie - no <tr> elements within a <div>). Then I would change it to append the new node as a sibling to the original. So instead of this:

ediv.appendChild(newdiv);

something like this:

ediv.parentNode.insertBefore(newdiv, ediv.nextSibling);

Also note, simply appending "1" to the div id will not work because you'll end up with multiple div elements with the same id. I'm guessing you probably don't even need an id value on those div elements.

I hope this gets you going in the right direction. Post back with specific questions if you need more help.

[dreamcatcher]

I can't try out your code right now but just for starters you need to change :

var ediv=document.getElementById(div);

to

var ediv=document.getElementById('Item1');

You need to pass the acual ID of the div as a string to Javascript.

No, that is correct. The part that is incorrect is:

var newdiv = document.createElement('div');

This is referencing an ID of 'div' which doesn`t exist. It should be the value passed into the function, so without quotes:

var newdiv = document.createElement(div);

dc

[durgasatya]

Thank you Fotiman..for your valuble suggestion
may i know where i can learn the correct markups i.e, like here i got trouble with <div> tag

[Fotiman]

@dreamcatcher:

The part that is incorrect is:

var newdiv = document.createElement('div');

This is referencing an ID of 'div' which doesn`t exist. It should be the value passed into the function, so without quotes:

var newdiv = document.createElement(div);

No, document.createElement takes a string of the element type to create ('div', 'p', 'span', etc.), not a random id value. The function addItem is taking in an parameter (div) which is the id of an existing element (note, div is not really a good variable name here, as it has clearly led to confusion... 'id' would have been a better name). Then it creates a 'div' element and copies the innerHTML of the element with the id that was passed into the function.

@durgasatya:
You can use the W3C Validator [validator.w3.org] to validate your markup. It might not be helpful for learning what items can be nested within each other, but it will at least tell you when you have invalid markup.

Note also that the HTML specs list what items an element can contain, though this is really defined by the DTD. For example, the TR [w3.org] element portion of the spec includes this bit taken from the DTD:

<!ELEMENT TR    - O (TH|TD)+    -- table row -->
<!ATTLIST TR              -- table row --
 %attrs;               -- %coreattrs, %i18n, %events --
 %cellhalign;             -- horizontal alignment in cells --
 %cellvalign;             -- vertical alignment in cells --
 >

This part:
(TH|TD)+
means that a TR must contain a minimum of one TH or TD element. There is a pretty good DTD Tutorial [w3schools.com] at W3Schools. Note, this is more of a low level approach. There are probably a number of good HTML books that display this information in a much more human readable format. :)

[dreamcatcher]

No, document.createElement takes a string of the element type to create ('div', 'p', 'span', etc.), not a random id value.

Yes, correct. Sorry, I was reading that as getElementById.

dc

[System]

The following message was cut out to new thread by fotiman. New thread at: javascript/4239714.htm [webmasterworld.com]
11:25 am on Dec 7, 2010 (utc -4)