newNode.getElementsByTagName("input")[2].onclick = function() { alert('test'); };

You could also try using the addEventListener method:

newNode.getElementsByTagName("input")[2].addEventListener('click',myFunction,false);

I think in IE you'll need to use attachEvent instead of addEventListener.  

If you do it that way, I think your function will receive an event as an argument. You can then look at event.target to see what element was clicked.

You could use jQuery also, it will work the same in IE or FF. If you gave your new element an ID of newelement, you could use this:

$('#newelement').click(function () { alert('test'); });

You might also look into jQuery bubbling events.  Using bubbling events you might be able to add an click handler to the table, div, etc containing all these links. Then when anything in that area is clicked, your function will fire.  In the function you can tell which element was clicked on, then handle that appropriately.

this onclick does not work. Please help.

Thanks for the wonderful tut.

I kept losing all of the previous input fields data when my create new element function ran.  Hopefully with a few tweaks from your script this is going to be all fixed.

I am hoping to use this code to interface to a PHP/MYSQL database.  I have no problems getting the data to an array and storing it.  I was wondering if there is a reasonably simple way of setting the initial state of the page based on previously entered data?

The steps I image are :
When the page loads

1. Get previously stored data from a database.
2. Call a javascript function with the parameters in an array from the database.
3. User modifies data
4. It saves to the database – and the process starts again.

Does anyone know how I could do this?  

Any help will be much appreciated.

<div id="idone">
                   <%= fields_for @category do %>
                         <ul>
                             <li><label>Category(optional)</label><li>
                             <li><%= text_field  :category_name %></li>
                         </ul>
                   <% end =%>
                  
                   <% for assignment in @category.assignments %>
                          <%= fields_for @assignment do %>
                              <li>
                                  <%= text_field  :name => "name[]", :class => "short" %>
                                  <%= text_field  :name => "date[]", :class => "short apart" %>
                                  <%= text_field  :name => "max_point[]", :class => "short apart" %>
                              </li>
                          <% end =%>
                   <% end %>
                          <input type="hidden" id="id" value="1">
                          <div id="divTxt"></div>
                          <a href="#"  class="add-more"  onClick="addFormField(); return false;">Add More Assignments</a>
                              
        </div>

I have a link  down like
          <a href="#"  class="add-more"  onClick="addcategory(); return false;">Add Another Category</a>

If i click on the above link the complete div should appear again. Like that i want to do n times.
How can i do that. Please please help me guys i was struck with this issue from 2 days..

badly need a help

Does the page need to reload when you remove an element? Also when I do this it deletes all the rows instead of just the one.

Also the number doesn't change when I add a row. It says 1 everytime.

I've tried this in both Firefox and Safari and same result.

Any suggestions would be much appreciated.

I don't have the same problem in IE 8 or Safari and luckily the form I'm creating will be used in IE 8 only, but I was still wondering if you might be able to shed some light on this problem. Thanks again!

can you post some code that fixes this or tell me in what direction i can search

(Ed: code example removed, it didn’t come through properly)