Welcome to WebmasterWorld Guest from 18.204.48.199

Forum Moderators: open

Message Too Old, No Replies

how to change text in an input box?

     
6:54 am on Sep 26, 2006 (gmt 0)

New User

10+ Year Member

joined:Aug 28, 2006
posts:31
votes: 0


I read about this before, but I can't find it anymore. Is there a way to change the text in an input type=text onclick a link?
6:59 am on Sept 26, 2006 (gmt 0)

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
posts:6807
votes: 0


... you need to change the
value
property of the input.
7:03 am on Sept 26, 2006 (gmt 0)

New User

10+ Year Member

joined:Aug 28, 2006
posts:31
votes: 0


Yeah, its value and encapsulated in single quotes.
8:34 am on Sept 26, 2006 (gmt 0)

Senior Member

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:July 3, 2006
posts: 3153
votes: 7


To access the forms[] array to change the value property of the input element (as DrDoc mentioned):

<a href="#" onclick="document.forms['name_of_form'].name_of_input.value = 'mynewvalue'; return false;">

The

value
property of the <input> element does not contain the single quotes (in this case).

The

name_of_form
and
name_of_input
values correspond to the values of the
name
attributes on your form and input elements respectively.
4:41 pm on Sept 26, 2006 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:5021
votes: 26


I would use the Yahoo UI Library to attach the event handler. But assuming you're not using that library, here's how I'd do it otherwise.

Assuming the following HTML:


<form name='yourForm' action="">
<div>
<input type='text' name='yourInput' id='yourInput' value='Hello World'>
<a href='#yourInput' id='yourLink'>Change the world!</a>
</div>
</form>

Define the following script in the head of your document to keep it unobtrusive:


<script type="text/javascript">
// Assign the value to the input with the id passed in
function changeTheWorld( idRef, val ) {
// Make sure browser supports getElementById
if(!document.getElementById ) return;
// Find the input by it's id
var inputObj = document.getElementById( idRef );
if( inputObj ) {
// Update the value
inputObj.value = val;
}
}
// Attach all of the behaviors requiured on the page
function attachBehaviors() {
// Make sure browser supports getElementById
if(!document.getElementById ) return;
// Find the link by it's id
var linkObj = document.getElementById( 'yourLink' );
if( linkObj ) {
// Attach the onclick handler
linkObj.onclick = function() {
changeTheWorld( 'yourInput', 'Hello Dolly' );
};
}
}
// Define the onload method and tell it to attachBehaviors
window.onload = function() {
attachBehaviors();
};
</script>

Just a different approach. :-)

7:45 pm on Sept 26, 2006 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
posts:7999
votes: 0


Foitman, has anyone told you lately you kick-A? :-)

if (post.value==Foitman) { bookmark(this); return true; }

2:50 pm on Sept 27, 2006 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts:5021
votes: 26


Hahaha... thanks rocknbil. :-)