Cloning an element but text input with empty value

[Alino]

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.

[gits]

i would suggest to use the cloneNode() method and remove the unwanted attributes after the clone-operation ...

kind regards

[Alino]

i tried some things but none works

this is my function

function addinput(inputid,what)
{
var obj = document.getElementById(what).cloneNode(true);
document.getElementById(inputid).appendChild(document.createElement('br') );
document.getElementById(inputid).appendChild(obj);
}
 

where to put removeAttribute correctly?

[gits]

how does your cloned node look like?

[Alino]

        <fieldset class="border" id="move_photo">
        <legend>Presunúť fotku v albume:</legend>
        <label for="move_photo_id">ID fotky:</label><br />
        <div id="6">
        <span id="sprytextfield6">
        <input type="text" name="move_photo_id[]" value="" />
<span class="textfieldInvalidFormatMsg">Iba cifry prosím. </span></span><br />
        <select name="dozadualebodopredu[]" class="w">
        <option value="dozadu">Dozadu</option>
        <option value="dopredu">Dopredu</option>
        </select>
        <br />
        <select name="okolko[]" class="w">
        <option value="1">O 1 miesto</option>
        <option value="16">O 16 miest</option>
        </select>
        </div>
        <input class="button" type="button" value="Pridať pole" onClick="return addinput('move_photo', '6')" />
        </fieldset>

[gits]

i guess you want to drop the value of the 'move_photo_id[]'-node? then you could just use:

document.getElementById(what + '[]').value = '';

in case the id with the square brackets follow this rule?

kind regards

[Alino]

i tried it, and the function now looks like

function addinput(inputid,what)
{
var obj = document.getElementById(what).cloneNode(true);
document.getElementById(inputid).appendChild(document.createElement('br') );
document.getElementById(inputid).appendChild(obj);
document.getElementById(what + '[]').value = '';
}
 

It looks it could work but it doesn't ;[ I tried also removing

"+ '[]'"

[gits]

ahhh ... i overlooked the id ... note ... we want to use the id of the input field:

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

[Alino]

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

function addinput(where,what,field)
{
var obj = document.getElementById(what).cloneNode(true);
document.getElementById(where).appendChild(document.createElement('br') );
document.getElementById(where).appendChild(obj);
document.getElementById(field).value = '';
}
 

and node:

        <fieldset class="border" id="add_friend">
        <legend>Pridať frienda do contact listu:</legend>
        <label for="add_friend_uid">User ID frienda:</label><br />
        <span id="sprytextfield4">
        <input type="text" name="add_friend_uid[]" id="add_friend_uid[]" value="" />
        <span class="textfieldInvalidFormatMsg">Iba cifry prosím. </span></span>
        <input class="button" type="button" value="Pridať pole" onClick="return addinput('add_friend', 'sprytextfield4', 'add_friend_uid[]')" />
        </fieldset>
 

[gits]

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

[Alino]

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

[gits]

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:

<script type="text/javascript">
 
function addinput(where, what) {
    var obj = document.getElementById(what).cloneNode(true);
    var br = document.createElement('br');
 
    cleanUpInputs(obj);
 
    document.getElementById(where).appendChild(br);
    document.getElementById(where).appendChild(obj);
}
 
function cleanUpInputs(obj) {
    for (var i = 0; n = obj.childNodes[i]; ++i) {
        if (n.childNodes && n.tagName != 'INPUT') {
            cleanUpInputs(n);
        } else if (n.tagName == 'INPUT' && n.type == 'text') {
            n.value = '';
        }
    }
}
 
</script>

kind regards

[Alino]

yees!! man!! it finaly works! thanks a lot to you, you are the only one who helped me out, I appreciate it. Nice :)

[gits]

no problem :) ... that's why i'm here for ... in case you have anymore questions, just post back to the forum ...

kind regards

[Alino]

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.

[gits]

after the line where we set the value to an empty value you could add:

n.focus();

kind regards

[Alino]

I tried that already, wrote it under this line and it's not working, something is wrong I don't know what.

n.value = '';
n.focus();
 

[gits]

ahhrg ... we need to focus the node after appending it of course :) ... here is the adaption:

<script type="text/javascript">
 
function addinput(where, what) {
    var obj = document.getElementById(what).cloneNode(true);
 
    var node = cleanUpInputs(obj);
 
    document.getElementById(where).appendChild(document.createElement('br'));
    document.getElementById(where).appendChild(obj);
 
    node.focus();
}
 
function cleanUpInputs(obj) {
    var focusNode = null;
 
    for (var i = 0; n = obj.childNodes[i]; ++i) {
        if (n.childNodes && n.tagName != 'INPUT') {
            cleanUpInputs(n);
        } else if (n.tagName == 'INPUT' && n.type == 'text') {
            focusNode = n;
            n.value = '';
        }
    }
 
    return focusNode;
}
 
</script>
 

kind regards

[Alino]

thanks, works great now :)

[gits]

of course it does :) ... just kidding :) ... glad to hear it works for your problem ...

kind regards