ansaurus

Question

Answer 1

+2 A:

var input = $('#input').clone().attr('name', 'name2').attr('id', 'input-2').appendTo('body')

You can go further and clone the entire row/div with $(el).clone() and then do .find('input') and modify the name and id attribute values so they're unique and don't conflict. You can pass true to clone if you want to copy the event handlers.

Incomplete non-jQuery "solution" since I don't know exactly at which point the OP is in since he claims he can clone nodes now..

  <div id="wrap">
    <div class="foo">
      <label for="first_name">name:</label><input type="text" name="first_name[]  " id="first_name"><a href="#">delete</a>
    </div>
    <a href="#" id="add">add name</a>
  </div>
  <script>
  (function() {
    var add = document.getElementById('add'), counter = 0;
    add.onclick = function() {
      var rows = document.getElementsByTagName('div'), last = false;
      if ( rows.length ) {
        for ( var i = rows.length; i--; ) {
            if ( last ) { break; }
            if ( rows[i].className.length && ( ' ' + rows[i].className + ' ' ).indexOf(' foo ') != -1 ) {
              last = rows[i];
            }
        }
      }
      if ( last ) {
        var newNode = last.cloneNode(true), wrap = document.getElementById('wrap'), input = newNode.getElementsByTagName('input');
        input.id = input.id + (counter++);
        wrap.appendChild( newNode );
      }
    }
  })();

meder 2009-10-20 06:03:53

it's not a complete solution, but a good start. it looks like you'll want to tie that to the "click" event of the "Add name" text... and you'll have to use some sort of counting variable for the name attribute... better would be just to have it as an array "name[]" and not bother modifying it at all.

Mark 2009-10-20 06:06:20

I never intended to post a full solution without seeing his specific markup, and I'm perfectly aware of what's possible.

meder 2009-10-20 06:07:22

Perhaps a little remaker: the solution by Meder uses jQuery, i don't see that mentioned anywhere.

ChrisR 2009-10-20 06:09:26

Doh .. Remaker?? Remark ofcourse ... :)

ChrisR 2009-10-20 06:10:09

Wow, bad reading on my part.

meder 2009-10-20 06:10:40

i can clone the name txtfield, i'm able to add as many as i can and delete the respective txtfiled....the problem is...how can i get values ?<input type="text" id="work_2_name" name="work[2][name]" /><input type="text" id="work_3_name" name="work[3][name]" />how can i get values entered in this textbox

luvboy 2009-10-20 06:18:13

Um. the `.value` attribute?

meder 2009-10-20 06:19:03

@ Meder, when i click on the submit, how can i get value entered in work[2][name] txtfield ? may be this seems very idiotic, but i'm not able to solve it meder, please help me

luvboy 2009-10-20 06:32:44

You should know that you will *not* get a proper solution until you provide some code.

meder 2009-10-20 06:39:31

can i have ur mail, not able to post the code in correct order

luvboy 2009-10-20 06:57:09

Answer 2

+1 A:

Hope this goes well.

<html>
<script type="text/javascript">
    function addfieldset() {
     var namefieldset = document.getElementById("name").cloneNode(true);
     document.getElementById("names").appendChild( namefieldset );
    }
    function deletefieldset( e ) {
     var namefieldset = e.parentNode;
     namefieldset.parentNode.removeChild( namefieldset );
    }
</script>
<body>
    <div id="names"><div id="name">Name: <input name="namefield" type="text"/><a href="#" onclick="deletefieldset( this )">delete</a></div></div>
    <input id="addnamebtn" type="button" value="Add Name" onclick="addfieldset()"/>
</body>
</html>

I remembered an excellent post from "quirkmodes" briefly explained this. I still hold in my bookmarks. Here it is.

Good Day!

Ramiz Uddin 2009-10-20 07:02:03

Thanx Ramiz, completed the work according to the spec and easy tooquirksmode.org helped me a lot to solve this spec...thanx to all who gave a helpfull support

luvboy 2009-10-20 18:32:50

I'm glad you found it useful.

Ramiz Uddin 2009-10-21 03:29:13

ansaurus

tags:

views:

answers:

How to add textbox dynamically ?

related questions