By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,504 Members | 1,176 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,504 IT Pros & Developers. It's quick & easy.

Cloning an element but text input with empty value

P: 25
how do i clonenode for example an div tag where are one text input field and two option tags to make that new cloned input field with an empty value? Thank you.
Aug 21 '09 #1
Share this Question
Share on Google+
19 Replies


gits
Expert Mod 5K+
P: 5,390
i would suggest to use the cloneNode() method and remove the unwanted attributes after the clone-operation ...

kind regards
Aug 21 '09 #2

P: 25
i tried some things but none works

this is my function
Expand|Select|Wrap|Line Numbers
  1. function addinput(inputid,what)
  2. {
  3. var obj = document.getElementById(what).cloneNode(true);
  4. document.getElementById(inputid).appendChild(document.createElement('br') );
  5. document.getElementById(inputid).appendChild(obj);
  6. }
  7.  
where to put removeAttribute correctly?
Aug 21 '09 #3

gits
Expert Mod 5K+
P: 5,390
how does your cloned node look like?
Aug 21 '09 #4

P: 25
Expand|Select|Wrap|Line Numbers
  1.         <fieldset class="border" id="move_photo">
  2.         <legend>Presunúť fotku v albume:</legend>
  3.         <label for="move_photo_id">ID fotky:</label><br />
  4.         <div id="6">
  5.         <span id="sprytextfield6">
  6.         <input type="text" name="move_photo_id[]" value="" />
  7. <span class="textfieldInvalidFormatMsg">Iba cifry prosím. </span></span><br />
  8.         <select name="dozadualebodopredu[]" class="w">
  9.         <option value="dozadu">Dozadu</option>
  10.         <option value="dopredu">Dopredu</option>
  11.         </select>
  12.         <br />
  13.         <select name="okolko[]" class="w">
  14.         <option value="1">O 1 miesto</option>
  15.         <option value="16">O 16 miest</option>
  16.         </select>
  17.         </div>
  18.         <input class="button" type="button" value="Pridať pole" onClick="return addinput('move_photo', '6')" />
  19.         </fieldset>
Aug 21 '09 #5

gits
Expert Mod 5K+
P: 5,390
i guess you want to drop the value of the 'move_photo_id[]'-node? then you could just use:

Expand|Select|Wrap|Line Numbers
  1. document.getElementById(what + '[]').value = '';
in case the id with the square brackets follow this rule?

kind regards
Aug 21 '09 #6

P: 25
i tried it, and the function now looks like

Expand|Select|Wrap|Line Numbers
  1. function addinput(inputid,what)
  2. {
  3. var obj = document.getElementById(what).cloneNode(true);
  4. document.getElementById(inputid).appendChild(document.createElement('br') );
  5. document.getElementById(inputid).appendChild(obj);
  6. document.getElementById(what + '[]').value = '';
  7. }
  8.  
It looks it could work but it doesn't ;[ I tried also removing
"+ '[]'"
Aug 21 '09 #7

gits
Expert Mod 5K+
P: 5,390
ahhh ... i overlooked the id ... note ... we want to use the id of the input field:

Expand|Select|Wrap|Line Numbers
  1. document.getElementById(what + '_id[]').value = '';
in your example the parameter what is 'move_photo' and the input node id is 'move_photo_id[]' ...

kind regards
Aug 22 '09 #8

P: 25
great, thanks, i made it work now, but it doesnt do what i wanted, this removes value from my first original text input, but i need to remove it from the cloned input.

this is my function now
Expand|Select|Wrap|Line Numbers
  1. function addinput(where,what,field)
  2. {
  3. var obj = document.getElementById(what).cloneNode(true);
  4. document.getElementById(where).appendChild(document.createElement('br') );
  5. document.getElementById(where).appendChild(obj);
  6. document.getElementById(field).value = '';
  7. }
  8.  
and node:
Expand|Select|Wrap|Line Numbers
  1.         <fieldset class="border" id="add_friend">
  2.         <legend>Pridať frienda do contact listu:</legend>
  3.         <label for="add_friend_uid">User ID frienda:</label><br />
  4.         <span id="sprytextfield4">
  5.         <input type="text" name="add_friend_uid[]" id="add_friend_uid[]" value="" />
  6.         <span class="textfieldInvalidFormatMsg">Iba cifry prosím. </span></span>
  7.         <input class="button" type="button" value="Pridať pole" onClick="return addinput('add_friend', 'sprytextfield4', 'add_friend_uid[]')" />
  8.         </fieldset>
  9.  
Aug 22 '09 #9

gits
Expert Mod 5K+
P: 5,390
in any case ... when you clone a node and want to use dom-methods later on you would need to unify te ids ... otherwise you will encounter problems with ids that have to be unique. so you would need to loop through the cloned elements and adapt the ids to be unique.

kind regards
Aug 23 '09 #10

P: 25
but i dont wont to use it later, i want to just create another text input with empty value by clicking on a button. best would be by using clonenode because it copies other elements too. help pleasee
Aug 23 '09 #11

gits
Expert Mod 5K+
P: 5,390
as i said ... loop through the child-nodes - here is an example ... it should work for you. it calls a method recursivly to find input-nodes of type text and cleans the value:

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2.  
  3. function addinput(where, what) {
  4.     var obj = document.getElementById(what).cloneNode(true);
  5.     var br = document.createElement('br');
  6.  
  7.     cleanUpInputs(obj);
  8.  
  9.     document.getElementById(where).appendChild(br);
  10.     document.getElementById(where).appendChild(obj);
  11. }
  12.  
  13. function cleanUpInputs(obj) {
  14.     for (var i = 0; n = obj.childNodes[i]; ++i) {
  15.         if (n.childNodes && n.tagName != 'INPUT') {
  16.             cleanUpInputs(n);
  17.         } else if (n.tagName == 'INPUT' && n.type == 'text') {
  18.             n.value = '';
  19.         }
  20.     }
  21. }
  22.  
  23. </script>
kind regards
Aug 23 '09 #12

P: 25
yees!! man!! it finaly works! thanks a lot to you, you are the only one who helped me out, I appreciate it. Nice :)
Aug 23 '09 #13

gits
Expert Mod 5K+
P: 5,390
no problem :) ... that's why i'm here for ... in case you have anymore questions, just post back to the forum ...

kind regards
Aug 23 '09 #14

P: 25
ok so one more question, to make this better, how could i give this new cloned input a focus? in other words, each click on add input button, would also make focus on latest cloned input.
Aug 31 '09 #15

gits
Expert Mod 5K+
P: 5,390
after the line where we set the value to an empty value you could add:

Expand|Select|Wrap|Line Numbers
  1. n.focus();
kind regards
Aug 31 '09 #16

P: 25
I tried that already, wrote it under this line and it's not working, something is wrong I don't know what.
Expand|Select|Wrap|Line Numbers
  1. n.value = '';
  2. n.focus();
  3.  
Aug 31 '09 #17

gits
Expert Mod 5K+
P: 5,390
ahhrg ... we need to focus the node after appending it of course :) ... here is the adaption:

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2.  
  3. function addinput(where, what) {
  4.     var obj = document.getElementById(what).cloneNode(true);
  5.  
  6.     var node = cleanUpInputs(obj);
  7.  
  8.     document.getElementById(where).appendChild(document.createElement('br'));
  9.     document.getElementById(where).appendChild(obj);
  10.  
  11.     node.focus();
  12. }
  13.  
  14. function cleanUpInputs(obj) {
  15.     var focusNode = null;
  16.  
  17.     for (var i = 0; n = obj.childNodes[i]; ++i) {
  18.         if (n.childNodes && n.tagName != 'INPUT') {
  19.             cleanUpInputs(n);
  20.         } else if (n.tagName == 'INPUT' && n.type == 'text') {
  21.             focusNode = n;
  22.             n.value = '';
  23.         }
  24.     }
  25.  
  26.     return focusNode;
  27. }
  28.  
  29. </script>
  30.  
kind regards
Sep 1 '09 #18

P: 25
thanks, works great now :)
Sep 1 '09 #19

gits
Expert Mod 5K+
P: 5,390
of course it does :) ... just kidding :) ... glad to hear it works for your problem ...

kind regards
Sep 1 '09 #20

Post your reply

Sign in to post your reply or Sign up for a free account.