Web Analytics Made Easy - StatCounter Create new input Text on focus. - CodingForum

Announcement

Collapse
No announcement yet.

Create new input Text on focus.

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    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?
    Tags: create text input, focus, text
  • #2
    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.

    Comment

    • #3
      Thank You. The code is very interesting.

      Comment

      Previous template Next
      Working...
      X
      😀
      🥰
      🤢
      😎
      😡
      👍
      👎