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!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

dynamically change size and maxlength of input field

Status
Not open for further replies.
kaeserea

kaeserea

Programmer
Feb 26, 2003
164
0
0
DE
Hello!

Depending on a selection in a drop down menue I'd like to change the size and maxlength of an input field:

[tt]
<select onChange="changeSize()" ...>
....

<input type="text" name="changeMe" size="5" maxlength="5">
[/tt]

I tried it with the style attribute. It works but unfortunately for style="width:5" you cannot say make it 5 characters long but only em, ex, pt, etc.
Also changing the max-width is not possible with IE6 which my users use.

So does anybody know hoe to do it differently?
Thanx for help!
Eva
 
Sort by date Sort by votes
You could try rewriting the HTML of the input box.

In the simpliest form:

obj.outerHTML = "<input type=text name='myTextBox' size=40>";

This gives scope for a lot of things :)

--BB
 
Upvote 0 Downvote

You should be able to change the size dynamically using setAttribute:

Code: 
<html>
<head></head>
<body>
	<form>
		<select onchange="this.form.myText.setAttribute('size', this.value);">
			<option value="1">1</option>
			<option value="5">5</option>
			<option value="10">10</option>
			<option value="20">20</option>
			<option value="50">50</option>
		</select>
		<br />
		<input type="text" name="myText" size="5">
	</form>
</body>
</html>

Hope this helps,
Dan
 
Upvote 0 Downvote
Hi!

Thanx for your suggestions. They helped me on the way to the solution. The setAttribute() does not work with the browser I use (IE6)....

This is how I solved it now:
[tt]
function changeSize()
{
// change or not?
var index = document.getElementById(2).selectedIndex;
var change = document.getElementById(2).options[index].text;

if (change == "change")
document.getElementById(1).size = "20";
}

...

<input type="text" name="changeMe" id="1" size="5">

<select onChange="changeSize()" id="2">
<option>change</option>
<option>no change</option>
</select>
[/tt]

Eva
 
Upvote 0 Downvote

>> The setAttribute() does not work with the browser I use (IE6)....

Yes it does... The code I posted above works 100% in IE6, and should, in fact, work in most new browsers.

Are you sure you didn't make a mistake when copying the code?

Dan
 
Upvote 0 Downvote

I'm guessing you loaded the code, changed from "1" to "5" and saw no difference in size, and then gave up assuming it didn't work after that...

Because the default size for the textbox was "5" and the default selection was "1", you'd have had to change to anything other than "5" to see a difference (only the first time round).

Dan
 
Upvote 0 Downvote
Hi Dan,

Interestingly when I copy your code exactly, it works. Yet I address the elements differently as the whole web site is rather complicated stuff and because I use JSP and with that dynamically create elements or not I use document.getElementById() in order to address elements. Otherwise I cannot be sure to get the right element.

So this is what I used:

[tt]
document.getElementById("MyId").setAttribute('size', "10");

...

<input type="text" name="name" id="MyId" size="5">
[/tt]

Eva
 
Upvote 0 Downvote

What you've given should work fine, assuming that you only have only one element on the page with the ID of "MyId".

Dan
 
Upvote 0 Downvote
Yep, only one element with that id. I don't really understand why it doesn't work. It's a pity, really. The setAttribute() function could be very usefull for me in many respects.

Eva
 
Upvote 0 Downvote

I can't imagine why it doesn't work for you. If I copy your input and setAttribute lines into my test harness, it still works fine

Code: 
<html>
<head></head>
<body>
	<form>
		<select onchange="document.getElementById('MyId').setAttribute('size', this.value);">
			<option value="1">1</option>
			<option value="5">5</option>
			<option value="10">10</option>
			<option value="20">20</option>
			<option value="50">50</option>
		</select>
		<br />
		<input type="text" name="name" id="MyId" size="1">
	</form>
</body>
</html>

I can only think that something else on your page is breaking the code ;o(

Dan
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Mike Lewis
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
319
Mike Lewis
Mike Lewis
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
210
xwb
xwb
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
184
malpa
malpa
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
157
rogerte
rogerte
lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
181
lexer
lexer

Part and Inventory Search

Sponsor

Back
Top