to add onblur function to an appended Input element

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • rubenhan
    New Member
    • Dec 2008
    • 7

    to add onblur function to an appended Input element

    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.onblu r = 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

    Code:
    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="addformte st" >
    <input type="text" onblur="addform (i)" name="copy[]"/>
    <div id="inhere"> </div>
    </form>
    </div>
    [/HTML]
  • acoder
    Recognized Expert MVP
    • Nov 2006
    • 16032

    #2
    Change
    Code:
    newForm.onblur = "addform(i)";
    to
    Code:
    newForm.onblur = function() {addform(i););
    To append to the right of the text box, use a combination of insertBefore and nextSibling to simulate insertAfter.

    Comment

    • rnd me
      Recognized Expert Contributor
      • Jun 2007
      • 427

      #3
      specifically:

      inHere.parentEl ement.insertBef ore(newForm, inHere.nextSibl ing )

      Comment

      • rubenhan
        New Member
        • Dec 2008
        • 7

        #4
        thank you guys. all solved.

        Comment

        • acoder
          Recognized Expert MVP
          • Nov 2006
          • 16032

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

          Comment

          Working...