Clear field with Javascript - use of variable?

Discussion in 'Javascript' started by Garry Jones, Oct 20, 2011.

  1. Garry Jones

    Garry Jones Guest

    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
     
    Garry Jones, Oct 20, 2011
    #1
    1. Advertising

  2. Garry Jones

    Tim Streater Guest

    In article <j7q78d$mn7$>,
    "Garry Jones" <> 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
     
    Tim Streater, Oct 20, 2011
    #2
    1. Advertising

  3. Garry Jones

    Erwin Moller Guest

    On 10/21/2011 12:53 AM, Tim Streater wrote:
    > In article <j7q78d$mn7$>,
    > "Garry Jones" <> 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
     
    Erwin Moller, Oct 21, 2011
    #3
  4. In comp.lang.javascript message <j7q78d$mn7$>, Fri, 21
    Oct 2011 00:27:23, Garry Jones <> 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.
     
    Dr J R Stockton, Oct 21, 2011
    #4
  5. 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
     
    Thomas 'PointedEars' Lahn, Oct 22, 2011
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. David

    Response.Clear() doesn't clear

    David, Jan 31, 2008, in forum: ASP .Net
    Replies:
    2
    Views:
    1,118
    Mark Fitzpatrick
    Jan 31, 2008
  2. InvalidLastName

    Unrecognized element 'add' after <clear></clear>

    InvalidLastName, Feb 26, 2007, in forum: ASP .Net Web Services
    Replies:
    3
    Views:
    1,068
    Steven Cheng[MSFT]
    Mar 6, 2007
  3. Sound
    Replies:
    2
    Views:
    498
    Randy Webb
    Sep 28, 2006
  4. Garry Jones

    Clear form field?

    Garry Jones, Oct 8, 2006, in forum: Javascript
    Replies:
    1
    Views:
    124
    McKirahan
    Oct 8, 2006
  5. jr
    Replies:
    3
    Views:
    492
Loading...

Share This Page