Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Clear field with Javascript - use of variable?

Reply
Thread Tools

Clear field with Javascript - use of variable?

 
 
Garry Jones
Guest
Posts: n/a
 
      10-20-2011
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

 
Reply With Quote
 
 
 
 
Tim Streater
Guest
Posts: n/a
 
      10-20-2011
In article <j7q78d$mn7$(E-Mail Removed)>,
"Garry Jones" <(E-Mail Removed)> 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
 
Reply With Quote
 
 
 
 
Erwin Moller
Guest
Posts: n/a
 
      10-21-2011
On 10/21/2011 12:53 AM, Tim Streater wrote:
> In article <j7q78d$mn7$(E-Mail Removed)>,
> "Garry Jones" <(E-Mail Removed)> 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;
cursorointer;}

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
 
Reply With Quote
 
Dr J R Stockton
Guest
Posts: n/a
 
      10-21-2011
In comp.lang.javascript message <j7q78d$mn7$(E-Mail Removed)>, Fri, 21
Oct 2011 00:27:23, Garry Jones <(E-Mail Removed)> 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.
 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      10-21-2011
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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
javascript validation for a not required field, field is onlyrequired if another field has a value jr Javascript 3 07-08-2010 10:33 AM
Response.Clear() doesn't clear David ASP .Net 2 01-31-2008 08:32 PM
Unrecognized element 'add' after <clear></clear> InvalidLastName ASP .Net Web Services 3 03-06-2007 03:07 AM
1.Enter space bar for field names and save the field.The field shoud not get saved and an alert should be there as"Space bars are not allowed" Sound Javascript 2 09-28-2006 02:43 PM
copy and paste form RTF document into field in asp form cause it to bypass field length and javascript validation - how to overcome? NotGiven ASP General 3 05-13-2004 12:15 AM



Advertisments