Clear field with Javascript - use of variable?

[Garry Jones]

I need to expand a function and a user button that clears an input field and
sets focus.

This works

<script language="JavaScript" type="text/javascript">
function cfld() {
document.getElementById("newsinl").value="";
document.getElementById("newsinl").focus();
}
</script>
<input maxLength="100" name="newsinl" id="newsinl" type="text" value=""
size="100">
<a href="javascript:cfld();" >Clear field</a>

What I need to do is to have several more of these functions.

Instead of writing a seperate function for each input field I would like to
use the same one and pass a variable from each link. Can someone point me in
the right direction as I am having problems finding a good site with simple
instructions for this.

Any help appreciated

Garry Jone
Expat, Sweden

 

[Tim Streater]

I need to expand a function and a user button that clears an input field and
sets focus.

This works

<script language="JavaScript" type="text/javascript">
function cfld() {
document.getElementById("newsinl").value="";
document.getElementById("newsinl").focus();
}
</script>
<input maxLength="100" name="newsinl" id="newsinl" type="text" value=""
size="100">
<a href="javascript:cfld();" >Clear field</a>

What I need to do is to have several more of these functions.

Instead of writing a seperate function for each input field I would like to
use the same one and pass a variable from each link. Can someone point me in
the right direction as I am having problems finding a good site with simple
instructions for this.

You don't need the language attribute. In fact these days all you need
is <script>.

You could do:

<a href="javascript:cfld('newsinl');" >Clear field</a>

and:

function cfld (objname)
{

var ptr = document.getElementById(objname);

ptr.value = "";
ptr.focus ();

}

 

[Erwin Moller]

You don't need the language attribute. In fact these days all you need
is <script>.

You could do:

<a href="javascript:cfld('newsinl');" >Clear field</a>

Isn't it better to avoid that ugly pseudo-protocol href="javascript:.."
altogether?

I use these days:
<span class="hrefmimic" onClick="cfld('newsinl');">Clear field</span>

where class="hrefmimic" is defined as something like:
..ahrefmimic {text-decoration:none; color:#000000;}
..ahrefmimic:hover {text-decoration:underline; color:#0000FF;
cursorointer;}

So it does look like a hyperlink.

Regards,
Erwin Moller

 

[Dr J R Stockton]

I need to expand a function and a user button that clears an input
field and sets focus.
...
Instead of writing a seperate function for each input field I would
like to use the same one and pass a variable from each link. Can
someone point me in the right direction as I am having problems finding
a good site with simple instructions for this.

function cfld() {
document.getElementById("newsinl").value="";
document.getElementById("newsinl").focus();
}

should. for readability, writeability, and efficiency, be

function cfld() { var X = document.getElementById("newsinl")
X.value="";
X.focus();
}

That is easily changed to
function cfld(X) {
X.value="";
X.focus();
}

now called by cfld(document.getElementById("newsinl"))

which can if beneficial be called by

function CFLD(S) { cfld(document.getElementById(S))

but can be called directly and given a reference to the input control.

You should have read the section of the FAQ entitled "Getting a
Reference to an Element", except that it does not exist there, so if you
have trouble with the above read instead section "Getting a Reference to
a Page Element" in page <http://www.merlyn.demon.co.uk/js-faq-u.htm>.

 

[Thomas 'PointedEars' Lahn]

<script language="JavaScript" type="text/javascript">

Forget about the deprecated `language' attribute for now.

function cfld() {
document.getElementById("newsinl").value="";
document.getElementById("newsinl").focus();

Never retrieve the same value more than one time:

var o = document.getElementById("newsinl");
o.value = "";
o.focus();

For a more fail-safe solution, check whether you have an object reference:

var o = document.getElementById("newsinl");
if (o)
{
o.value = "";
o.focus();
}

(Note that this approach can hide errors in the markup – such as
accidentally misnamed elements – and make debugging harder. So use it
wisely.)

For an even safer solution, test that the methods you are about to call do
exist:

var t = typeof document.getElementById;
if (/unknown/i.test(t)
|| /\b(object|function)\b/i.test(t) && document.getElementById)
{
var o = document.getElementById("newsinl");
if (o)
{
o.value = "";
t = typeof o.focus;
if (/unknown/i.test(t)
|| /\b(object|function)\b/i.test(t) && o.focus)
{
o.focus();
}
}
}

(Wrappers in the form of `isMethod' and `isHostMethod' have been devised.
STFW if it cannot be found in the FAQ.)

To be really safe, also catch any exceptions this might throw (for example,
if the control in question is not rendered, it cannot be focused):

var t = typeof document.getElementById;
if (/unknown/i.test(t)
|| /\b(object|function)\b/i.test(t) && document.getElementById)
{
var o = document.getElementById("newsinl");
if (o)
{
o.value = "";
var t = typeof o.focus;
if (/unknown/i.test(t)
|| /\b(object|function)\b/i.test(t) && o.focus)
{
try
{
o.focus();
}
catch (e)
{
/* perhaps do something alternative here */
}
}
}
}

(This is only an illustrative example. Depending on your target
environments, you may not need to test whether document.getElementById is a
method.)

Note that try..catch was a late addition to ECMAScript, so it might be
considered a syntax error by an implementation. You can work around that,
so that the code compiles:

var t = typeof document.getElementById;
if (/unknown/i.test(t)
|| /\b(object|function)\b/i.test(t) && document.getElementById)
{
var o = document.getElementById("newsinl");
if (o)
{
o.value = "";
var t = typeof o.focus;
if (/unknown/i.test(t)
|| /\b(object|function)\b/i.test(t) && o.focus)
{
eval("try { o.focus(); } catch (e) {}");
}
}
}

But keep in mind that eval() decreases the runtime efficiency of your code
considerably, and that it does not work in the strict mode of ECMAScript
Edition 5 (the eval code's scope chain will be empty, so `o' undefined).

}
</script>
<input maxLength="100" name="newsinl" id="newsinl" type="text" value=""
size="100">

You should make it obvious which kind of control you are using. Move the
`type' attribute specification to the front, or omit it ("text" is the
default value). It is good practice to put identifying attribute
specifications first and formatting ones second.

<a href="javascript:cfld();" >Clear field</a>

Avoid doing this. Use a dynamically generated button instead. At least use
an `onclick' attribute on this element. See the FAQ.

[…]
Instead of writing a seperate function for each input field I would like
to use the same one and pass a variable from each link. Can someone point
me in the right direction as I am having problems finding a good site with
simple instructions for this.

See <https://developer.mozilla.org/en/JavaScript/Guide/Functions>. You can
find a lot more information in adjacent chapters.

MDN is linked from the FAQ, <http://jibbering.com/faq/>, which you should
have read before you posted.


PointedEars