onclick issues

gradinumcp · Sep 7, 2006

Hi there...on my form, I have a text field that displays a number. I have a button next to it with the name "Change". I want to be able to click on "Change", so that the text field becomes an input field, so I can enter a different value and then the page refreshes to display the new value as a text.

<td onclick="enableField();"><%=Computer("ComputerIP")%></td>

<script language="javascript">

function enableField()
{
What goes in here??
}

</script>

j4606 · Sep 7, 2006

I don't fully understand what you mean by text field and converting that to an input field. I took this from the w3school site.
"The Text object represents a text field in an HTML form. For each instance of an <input type="text"> tag in an HTML form, a Text object is created."
Essentially a "text field" and an "input field" of type=text are the same thing atleast as far as I know?

What I think you may want is to have a way to click on the intterText of a td and have it convert to an input field?
I guess on blur() you want to refresh the td with the new data from the input box?

cLFlaVA · Sep 7, 2006

you should keep it as a field (rather than a td) all the time. you can style it to look like plain text until you enable the field.

your enable function should look something like this:

Code:

function enableField() {
    document.forms['Formname'].elements['Textfieldname'].disabled = false;
}

you should also consider using some CSS classes to style the field.

*cLFlaVA
----------------------------
[tt]mr. pibb + red vines = crazy delicious![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

j4606 · Sep 7, 2006

Yah clFlaVA prolly offered the the best solution, It would be much easier to just disable form elements.
Although if you really need to, im bord at work, so i made you this example.

Code:

<html>
	<head>
		<script type="text/javascript">
			var tdObj;
			function myFunction(myVar){
				myVar.innerHTML = "<input type='text' value='enter a number' onblur='myFunction2(this);'>";
				tdObj = myVar;
			}
			function myFunction2(myVar){
				tdObj.innerHTML = myVar.value;
			}
		</script>
		
	</head>
	<body>
		<table id="myTable" border="1">
			<tr>
				<td onclick="myFunction(this);">Row1 cell1</td>
				<td onclick="myFunction(this);">Row1 cell2</td>
			</tr>
			<tr>
				<td onclick="myFunction(this);">Row2 cell1</td>
				<td onclick="myFunction(this);">Row2 cell2</td>
			</tr>
			<tr>
				<td onclick="myFunction(this);">Row3 cell1</td>
				<td onclick="myFunction(this);">Row3 cell2</td>
			</tr>
		</table>
		
	</body>
</html>

gradinumcp · Sep 7, 2006

wow--thanks j4 and clflava for your feedback. I am trying a couple of things here based on your suggestions..though I am unable to understand j4's code of innerhtml--sorry i have no clue what that is. Well now that you are bored---you can try explaining it to me...

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!

onclick issues

gradinumcp

IS-IT--Management

j4606

MIS

cLFlaVA

Programmer

j4606

MIS

gradinumcp

IS-IT--Management

Similar threads

Part and Inventory Search

Sponsor