to add onblur function to an appended Input element

[rubenhan]

Hey, guys.

My basic idea is this. When I write "1" in the pre-existing text field and onblur, I want to add a new field with a set of attributes, which turned out to be the same as the pre existing text field. (I don't want to use clonenode because of the compatibility issue)

So I want that new text field to behave like the old text field. However, the new text field does not create another text field when I write "1" into it and onblur it. Is "node.onblur = function" not a right syntax when I'm assigning attribute?

In essence I want my new text field have this html code behind it.
[HTML]<input type="text" onblur="addform(i)" name="copy[]"/>[/HTML]

I'm using i to designate the position of name "copy[]" array.

The first text field works fine. It creates a new text field but it looks like it's not adding the onblur attribute as I checked with Firebug. What am I doing wrong?

One more question. Every time a new field is created, it is created right below the original text field. If I want to append that text field to the right of the original text field, how do I pull this off?

Thank you

var textInput;
var inHere;
var i=0;
var newForm;
function addform(i) {
 
 
    textInput = document.getElementsByName("copy[]")[i];
    i++;
    if (textInput.value == "1") { // if text field's value is 1 then create another text field with the following attribute.
        newForm = document.createElement("input");
        newForm.type = "text";
        newForm.name = "copy[]";
        newForm.onblur = "addform(i)";
        inHere = document.getElementById("inhere");
        inHere.appendChild(newForm);
       } else document.write("failed");
 
}

[HTML]
<div id="add" >
<form action="addform.php" method="post" name="addformtest" >
<input type="text" onblur="addform(i)" name="copy[]"/>
<div id="inhere"> </div>
</form>
</div>
[/HTML]

[acoder]

Change

newForm.onblur = "addform(i)";

to

newForm.onblur = function() {addform(i););

To append to the right of the text box, use a combination of insertBefore and nextSibling to simulate insertAfter.

[rnd me]

specifically:

inHere.parentElement.insertBefore(newForm, inHere.nextSibling )

[rubenhan]

thank you guys. all solved.

[acoder]

You're welcome. Post again if you have any more questions.