467,867 Members | 1,266 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,867 developers. It's quick & easy.

Using Javascript to change a value in a textbox.

Ant
Ok, so I have a regular input textbox on my webpage and I'm trying to work
out how to make it so when the user presses a button the the textbox holds
the value of a variable. I just can't work out how to do this.

any help much appreciated
Jul 23 '05 #1
  • viewed: 124904
Share:
2 Replies
Ant wrote:
Ok, so I have a regular input textbox on my webpage and I'm trying to work out how to make it so when the user presses a button the the textbox holds the value of a variable. I just can't work out how to do this.

any help much appreciated


That textbox - like all the HTML elements on your webpage (and many
other items as well) is represented in the (java)scripting environment
by an object. This is a software construct that provides the interface
('control panel') for programming the textbox itself. So...first, you
need to get a legitimate reference (something like a pointer) to that
object.

HTML:

<form name="a_form">
<input type="text" id="a_tbox" name="a_tbox" value="" />

JS:

var tbox = document.getElementById('a_tbox'); //uses id
....or
var tbox = document.forms['a_form'].elements['a_tbox']; //uses name

There are numerous other ways, but these are probably the commonest,
cross-browser. That (INPUT) object you just found has a .value property
- basically a read/write variable 'attached' to it, which holds the
currently displayed text string. To alter it, just assign that
variable:

var txt = 'some text';
var tbox = document.getElementById('a_tbox');
if (tbox)
{
tbox.value = txt;
}

Now all you need is to trigger the process from an event handler, in
this case the 'onclick' handler of the button you're using:

<input type="button" name="btn" value="write it" onclick="writeit()" />

What's 'writeit()'? It's the function where you 'stored' the above
instructions (statements):

function writeit()
{
var txt = 'some text';
var tbox = document.getElementById('a_tbox');
if (tbox)
{
tbox.value = txt;
}
}

Declare the function in a <script></script> block in the <head>er of
your document. It must be in memory before the button is rendered
(visible) to avoid errors.

Sorry if that's a bit pedantic, but you sound like you're just learning
this stuff. Good luck !

Jul 23 '05 #2
Ant

"RobB" <fe******@hotmail.com> wrote in message
news:11**********************@o13g2000cwo.googlegr oups.com...
Ant wrote:
Ok, so I have a regular input textbox on my webpage and I'm trying to

work
out how to make it so when the user presses a button the the textbox

holds
the value of a variable. I just can't work out how to do this.

any help much appreciated


That textbox - like all the HTML elements on your webpage (and many
other items as well) is represented in the (java)scripting environment
by an object. This is a software construct that provides the interface
('control panel') for programming the textbox itself. So...first, you
need to get a legitimate reference (something like a pointer) to that
object.

HTML:

<form name="a_form">
<input type="text" id="a_tbox" name="a_tbox" value="" />

JS:

var tbox = document.getElementById('a_tbox'); //uses id
...or
var tbox = document.forms['a_form'].elements['a_tbox']; //uses name

There are numerous other ways, but these are probably the commonest,
cross-browser. That (INPUT) object you just found has a .value property
- basically a read/write variable 'attached' to it, which holds the
currently displayed text string. To alter it, just assign that
variable:

var txt = 'some text';
var tbox = document.getElementById('a_tbox');
if (tbox)
{
tbox.value = txt;
}

Now all you need is to trigger the process from an event handler, in
this case the 'onclick' handler of the button you're using:

<input type="button" name="btn" value="write it" onclick="writeit()" />

What's 'writeit()'? It's the function where you 'stored' the above
instructions (statements):

function writeit()
{
var txt = 'some text';
var tbox = document.getElementById('a_tbox');
if (tbox)
{
tbox.value = txt;
}
}

Declare the function in a <script></script> block in the <head>er of
your document. It must be in memory before the button is rendered
(visible) to avoid errors.

Sorry if that's a bit pedantic, but you sound like you're just learning
this stuff. Good luck !


That's a really informative answer, and has helped me absolutely loads,
thank you very much indeed!!
Jul 23 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by Richard | last post: by
1 post views Thread by c.verma | last post: by
2 posts views Thread by rockdale | last post: by
4 posts views Thread by Goofy | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.