onblur add dynamic form does not work

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

    onblur add dynamic form does not work

    Hi guys,

    I'm a javascript beginner and I am trying to write this simple javascript code that will add text field when I type some texts in the preexisting text field. When the text field is onblur, javascript will see if the type of the text's value is either number or string.
    Depending on its type it will create either a text field or a button. However, for some reason, nothing is happening. Could you check my code and see what's wrong with it? Thank you.

    Code:
    <script type="text/javascript" >
    var defaultname = "workout";
    var defaultnumber = 0;
    var forms2;
    var text1;
    var text1type;
    
    function addform() {
    	defaultnumber++;
    	text1 = document.getElementsByName("copy");
    	text1type = typeof text1.value;
    	if (text1type == "number") {
    		forms2 = document.createElement("input");
    		forms2.type = "text";
    		forms2.name = defaultname + defaultnumber;
    		inHere = document.getElementById("inhere");
    		inHere.appendChild(forms2);
    	} elseif (text1type == "string") {
    		forms2 = document.createElement("input");
    		forms2.type = "button";
    		forms2.name = defaultname + defaultnumber;
    		forms2.value = "button";
    		inHere = document.getElementById("inhere");
    		inHere.appendChild(forms2);
    	} else document.write("wrong input");
    
    }
    
    </script>

    [HTML]
    <div id="add" >
    <form action="addform test2.html" method="post" name="addformte st" >
    <input type="text" onblur="addform ()" name="copy" value="" />
    <div id="inhere"> </div>
    </form>
    </div>
    [/HTML]
  • RamananKalirajan
    Contributor
    • Mar 2008
    • 608

    #2
    Hi, there were couple of problems in your code.

    1) in else if condition, there is no space between the else and if.
    2) Instead of document.getEle mentsByTagName use document.getEle mentById.


    Moreover any input will return only the string value so in ur code, u will be able to see a button creating after blur event..

    The following is one logic, but try yours by own

    Code:
    <html>
    <head>
    <script type="text/javascript" > 
    var defaultname = "workout"; 
    var defaultnumber = 0; 
    var forms2; 
    var text1; 
    var text1type; 
      
    function addform() { 
        defaultnumber++; 
        text1 = document.getElementById("copy"); 
        text1type = checkNo(text1.value);
    	//alert("Value = "+text1type);
        if (text1type == "number") { 
            forms2 = document.createElement("input"); 
            forms2.type = "text"; 
            forms2.name = defaultname + defaultnumber; 
            inHere = document.getElementById("inhere"); 
            inHere.appendChild(forms2); 
        } else if (text1type == "string") { 
            forms2 = document.createElement("input"); 
            forms2.type = "button"; 
            forms2.name = defaultname + defaultnumber; 
            forms2.value = "button"; 
            inHere = document.getElementById("inhere"); 
            inHere.appendChild(forms2); 
        } else document.write("wrong input"); 
      
    } 
      
    function checkNo(val)
    {
         var no=new Array("1","2","3","4","5","6","7","8","9");
    	 var flag=1;
    	 var x;
    	 for(var i=0;i<no.length;i++)
    	 {
    	    	x=val.indexOf(no[i]);
    			if(x>-1)
    			{
    			 flag=0;
    			 break;
    			}
    	 }
    	 if(flag==0)
    	 {
    	    return "number";
    	 }
    	 else
    	 {
    	   return "string";
    	 }
    }
    
    
    </script> 
    </head>
    <body>
    <div id="add" >
    <form action="addformtest2.html" method="post" name="addformtest" >
    <input type="text" onblur="addform()" name="copy" value="" />
    <div id="inhere"> </div>
    </form>
    </div>
    </body>
    </html>

    Regards
    Ramanan Kalirajan

    Comment

    Working...