Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Create new input Text on focus.

    I tried to create a new text input once the last text box gets focus. But I cant even type in them because every time it gets focus a new text input is created! I really dunno what to do.

    Code:
    <html>
    <head>
    <script type="text/javascript">
    function getTB(field)
    { 
    var i = document.getElementById("f1").length + 1;
    
    var cmd = "<input type=text name = "+ i + " onfocus=getTB() value = " + i + ">";
    
    document.getElementById('f1').innerHTML = document.getElementById('f1').innerHTML + cmd;
    document.getElementById(i-2).focus();
    }
    </script>
    </head>
    <body>
    <form id ="f1">
    <input type ="text" value ="hello" name="1" onFocus ="getTB(this)">
    </form>
    </body>
    </html>
    how to modify so not every time a new text input created when tried to type in?

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,300
    Thanks
    203
    Thanked 2,561 Times in 2,539 Posts
    Quote Originally Posted by blazzer12 View Post
    I tried to create a new text input once the last text box gets focus. But I cant even type in them because every time it gets focus a new text input is created!
    Well, yes. That suggests that you should re-think the idea!

    You are using document.getElementById() but you have assigned no ids. Note that an id must begin with a letter.

    This may be of help to you:-

    Code:
    <html>
    <head>
    
    <style = "text/css">
    input.box {
    position: absolute;
    left:55px;
    } 
    </style>
    
    </head>
    
    <body>
    
    <form name = "myform" id = "myform">
    <span id = "btns1"></span><span id = "boxes1"></span>
    <span id = "btns2"></span><span id = "boxes2"></span>
    <span id = "btns3"></span><span id = "boxes3"></span>
    <span id = "btns4"></span><span id = "boxes4"></span>
    <span id = "btns5"></span><span id = "boxes5"></span>
    <span id = "btns6"></span><span id = "boxes6"></span>
    <br><br>
    </form>
    
    <script type = "text/javascript">
    
    var addbut = '<input type = "button" name = "but1" value = "+" onclick = "addarow()">'
    var delbut = '<input type = "button" name = "but2 "value = "-" onclick = "deletearow()">'
    var nobut = '<input type = "button" name = "but3" value = " ">'
    var count = 1;
    
    var addbox = '<input type = "text" name = "txt'+count+'" id = "txt'+count+'"  class = "box">';
    
    document.getElementById("btns1").innerHTML = addbut;
    document.getElementById("boxes1").innerHTML = addbox + "<br>";
    
    function addarow() {
    count ++;
    if (count == 6) {
    document.getElementById("btns"+count).innerHTML =  delbut;  // no add button for sixth box
    }
    else {
    document.getElementById("btns"+count).innerHTML = addbut + delbut;
    }
    document.getElementById("btns"+(count-1)).innerHTML = nobut;
    addbox = '<input type = "text" name = "txt'+count+'" id = "txt'+count+'"  class = "box">';
    document.getElementById("boxes"+count).innerHTML = addbox + "<br>";
    }
    
    function deletearow() {
    document.getElementById("btns"+count).innerHTML = "";
    document.getElementById("boxes"+count).innerHTML = "";
    if (count == 2) {
    document.getElementById("btns"+(count-1)).innerHTML = addbut;
    }
    else {
    document.getElementById("btns"+(count-1)).innerHTML = addbut + delbut;
    }
    count --;
    }
    </script>
    
    <input type = "button" value = "Get Values" onclick = "getValues()">
    
    <script type="text/javascript">
    
    function getValues()    {  
    
    for (var i = 1; i<document.myform.elements.length; i++) {
    if (document.myform.elements[i].type == "text") {
    alert (document.myform.elements[i].name  + " value = " + document.myform.elements[i].value);
    }
    }
    
    }
         
    </script>    
    
    
    </body>
    </html>
    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    blazzer12 (09-07-2011)

  • #3
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank You. The code is very interesting.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •