How to create a text box on the fly 1

timgerr · Jun 11, 2007

Hey all, I was wondering if anyone had a link or show some code to creating a text box on the fly with java script?
Thanks -T

-How important does a person have to be before they are considered assassinated instead of just murdered?
-Need more cow bell!!!

monksnake · Jun 11, 2007

What is on-the-fly??

As the page loads?
On a button click?

Not sure exactly what you mean.

[monkey]

<.

timgerr · Jun 11, 2007

sorry, I want to dynamically create a textbox when I click a button.

-T

-How important does a person have to be before they are considered assassinated instead of just murdered?
-Need more cow bell!!!

monksnake · Jun 11, 2007

Got ya.

You can do this a few ways. The easiest is with innerHTML.
This quick example will tag on a new textbox with each click. You can look at my code and see how it is done, this should be enough to get you to understand what's going on.

Code:

<script type="text/javascript">
function addTextbox() {
   document.getElementById("divToAddTextBox").innerHTML += '<input type="text" value="New Textbox" />';
}
</script>

<body>
<div id="divToAddTextBox">

</div>
<input type="button" onclick="addTextbox()" value="Click Here to Add Textbox" />
</body>

<.

timgerr · Jun 11, 2007

Thanks, I will look into that one. You have been such a great help. Is there another way to do it like building an object?

-T

-How important does a person have to be before they are considered assassinated instead of just murdered?
-Need more cow bell!!!

monksnake · Jun 11, 2007

Yeah, I'll show code for that too.
Using the exact same code above, except for the javascript:

Code:

function addTextbox() {
    var newInput = document.createElement("input");
    newInput.setAttribute("type", "text");
    newInput.setAttribute("value", "New TextBox");
    document.getElementById("divToAddTextBox").appendChild(newInput);
}

<.

timgerr · Jun 11, 2007

OK, so I have been working on this for about an few hours, just playing and learning. Here is what I have, it works in Firefox but not in IE. Can someone help me with this?

What the page is doing is text is displayed and when you click on it, a textbox forms so you can edit the text. Then when you make a change the textbox disappears.

Code:

<html>
	<head>
		<title>Testing v1</title>
		<script type="text/javascript" src="prototype.js"></script>
		<script type="text/javascript">
			
			function nText(divIdInfo,divIdText)
			{				
				// Now we need to get the stuff between the info Div
				var pOne = $(divIdInfo).innerHTML;
				// lets hide DivIdInfo
				//$(divIdInfo).style.display="none;"
				document.getElementById(divIdInfo).style.display ="none";
				// Lets now show divIdText
				$(divIdText).style.display = "block";
				
				var nTB = divIdText + 'TB'
				// Now we need to do is create the input 
				var newInput = document.createElement("input");
				newInput.setAttribute("type","text");
				newInput.setAttribute("value",pOne);
				newInput.setAttribute("id",nTB);
				newInput.setAttribute("onChange","changeMeBack(\'" + divIdInfo + "\',\' " + divIdText + "\',\'" + nTB + "\')");
				// Lets now add the text box to divIdText;
				$(divIdText).appendChild(newInput);
			}
			function changeMeBack(divIdInfo,divIdText,divIdKill)
			{		
					alert("WTF MAn");
					alert(divIdText);
				// I need to add the changed info to the divIdInfo div
				document.getElementById(divIdInfo).innerHTML = document.getElementById(divIdKill).value;
				document.getElementById(divIdInfo).style.display ="block";
				removeInput(divIdText);		
			}
			function removeInput(nodId)
			{
				var under = $(addTextTwo);
				under.removeChild(under.firstChild);
			}

		</script>
		
	</head>
	<body>
		<div id="addTextOne"  onclick="nText('addTextOne','addTextTwo')">Enter data here</div>
		<div id="addTextTwo" style="display:none" ></div>
	</body>
</html>

I am not getting any errors in it, but the part where alert('WTF MAn') is not working so I might have the error there. I am unable to find what I am doing wrong.

Thanks for the gander,
-T

-How important does a person have to be before they are considered assassinated instead of just murdered?
-Need more cow bell!!!

monksnake · Jun 11, 2007

setting an event as an attribute shows wierd behavior.

Code:

newInput.setAttribute("onChange","changeMeBack(\'" + divIdInfo + "\',\' " + divIdText + "\',\'" + nTB + "\')");

I do this:

Code:

newInput.onchange = function() {changeMeBack(divIdInfo, divIdText, nTB)};

You also have one other error in your code. You need to add the quotes:

Code:

var under = document.getElementById([!]"[/!]addTextTwo[!]"[/!]);

<.

timgerr · Jun 11, 2007

I cannot tell you ho much I owe you. I am learning and you have given me soo much. Thanks again.

-T

-How important does a person have to be before they are considered assassinated instead of just murdered?
-Need more cow bell!!!

monksnake · Jun 12, 2007

Thanks, I have no problem at all helping someone that is wanting to learn. [cheers]

<.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

How to create a text box on the fly 1

timgerr

IS-IT--Management

monksnake

Programmer

timgerr

IS-IT--Management

monksnake

Programmer

timgerr

IS-IT--Management

monksnake

Programmer

timgerr

IS-IT--Management

monksnake

Programmer

timgerr

IS-IT--Management

monksnake

Programmer

Similar threads

Part and Inventory Search

Sponsor