Create new input Text on focus.

blazzer12 · 09-03-2011, 05:15 PM

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?

Philip M · 09-04-2011, 11:11 AM

Quote:

Originally Posted by blazzer12

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.

blazzer12 · 09-07-2011, 08:44 PM

Thank You. The code is very interesting.