Velocity Reviews

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)
-   Javascript (http://www.velocityreviews.com/forums/f68-javascript.html)
-   -   Clear field with Javascript - use of variable? (http://www.velocityreviews.com/forums/t943445-clear-field-with-javascript-use-of-variable.html)

Garry Jones 10-20-2011 10:27 PM

Clear field with Javascript - use of variable?
 
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 10-20-2011 10:53 PM

Re: Clear field with Javascript - use of variable?
 
In article <j7q78d$mn7$1@dont-email.me>,
"Garry Jones" <garry@garryjones.se> wrote:

> 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 ();

}

--
Tim

"That excessive bail ought not to be required, nor excessive fines imposed,
nor cruel and unusual punishments inflicted" -- Bill of Rights 1689

Erwin Moller 10-21-2011 09:24 AM

Re: Clear field with Javascript - use of variable?
 
On 10/21/2011 12:53 AM, Tim Streater wrote:
> In article <j7q78d$mn7$1@dont-email.me>,
> "Garry Jones" <garry@garryjones.se> wrote:
>
>> 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>
>


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;
cursor:pointer;}

So it does look like a hyperlink.

Regards,
Erwin Moller


> and:
>
> function cfld (objname)
> {
>
> var ptr = document.getElementById(objname);
>
> ptr.value = "";
> ptr.focus ();
>
> }
>



--
"That which can be asserted without evidence, can be dismissed without
evidence."
-- Christopher Hitchens

Dr J R Stockton 10-21-2011 08:53 PM

Re: Clear field with Javascript - use of variable?
 
In comp.lang.javascript message <j7q78d$mn7$1@dont-email.me>, Fri, 21
Oct 2011 00:27:23, Garry Jones <garry@garryjones.se> posted:

>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>.

--
(c) John Stockton, nr London UK. ?@merlyn.demon.co.uk IE8 FF3 Op12 Sf5 Cr12
news:comp.lang.javascript FAQ <http://www.jibbering.com/faq/index.html>.
<http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.

Thomas 'PointedEars' Lahn 10-21-2011 11:17 PM

Re: Clear field with Javascript - use of variable?
 
Garry Jones wrote:

> <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
--
var bugRiddenCrashPronePieceOfJunk = (
navigator.userAgent.indexOf('MSIE 5') != -1
&& navigator.userAgent.indexOf('Mac') != -1
) // Plone, register_function.js:16


All times are GMT. The time now is 05:45 AM.

Powered by vBulletin®. Copyright ©2000 - 2014, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.