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!
-
Congratulations bkrike on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Pop up text field 1
- Thread starter Nebooaw
- Start date
-
1
- #2
BillyRayPreachersSon
Programmer
Unfortunately, due to the fact that you cannot change an element's type once it has been created, you'll have to "fake it".
Several ways spring to mind - one would be to dynamically remove and recreate the elements as different types each time - this, IMHO, would be less desirable than the solution given below. That involves having 2 fields, one single-line and one multi-line (initially hidden). The code swaps between the two of them. The advantages of this method are:
1. The elements appear in the right place without too much hassle.
2. The two elements can have different values - which they retain when switching between them.
When you go to submit the form, simply read the values from whichever box is visible (which you can tell by reading the "style.display" property.
Enough ranting - here's the code:
Hope this helps,
Dan
Several ways spring to mind - one would be to dynamically remove and recreate the elements as different types each time - this, IMHO, would be less desirable than the solution given below. That involves having 2 fields, one single-line and one multi-line (initially hidden). The code swaps between the two of them. The advantages of this method are:
1. The elements appear in the right place without too much hassle.
2. The two elements can have different values - which they retain when switching between them.
When you go to submit the form, simply read the values from whichever box is visible (which you can tell by reading the "style.display" property.
Enough ranting - here's the code:
Code:
<html>
<head>
<script type="text/javascript">
<!--
function doubleClicked(sourceElement) {
if (sourceElement.name.lastIndexOf('Multi') != sourceElement.name.length - 5) {
// 'convert' single-line to multi-line
var baseName = sourceElement.name.substr(0, sourceElement.name.lastIndexOf('Single'));
document.getElementById(baseName + 'Single').style.display = 'none';
document.getElementById(baseName + 'Multi').style.display = '';
} else {
// 'convert' multi-line to single-line
var baseName = sourceElement.name.substr(0, sourceElement.name.lastIndexOf('Multi'));
document.getElementById(baseName + 'Single').style.display = '';
document.getElementById(baseName + 'Multi').style.display = 'none';
}
}
//-->
</script>
</head>
<body>
<form>
<input type="text" name="myText1Single" value="" ondblclick="doubleClicked(this);" />
<textarea name="myText1Multi" ondblclick="doubleClicked(this);" style="display:none;"></textarea>
<br />
<input type="text" name="myText2Single" value="" ondblclick="doubleClicked(this);" />
<textarea name="myText2Multi" ondblclick="doubleClicked(this);" style="display:none;"></textarea>
<br />
<input type="text" name="myText3Single" value="" ondblclick="doubleClicked(this);" />
<textarea name="myText3Multi" ondblclick="doubleClicked(this);" style="display:none;"></textarea>
<br />
</form>
</body>
</html>Hope this helps,
Dan
- Thread starter
- #3
- Status
Similar threads