Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #12551

Re: Setting a text field's value from a href

Followups directed to: comp.lang.javascript

Show all headers | View raw

Christian Winter wrote:

> Am 09.03.2012 15:18, schrieb Larry.Martell@gmail.com:
>> I have a text field and a href. When the user click on the link I want
>> to set the text field to a value. I'm trying to do it with jQuery, but
>> I can't get it to work. I have this:
>>
>> <A href="javascript: $('filterValue').val('POR');">POR</A>
>>
>> How can I accomplish this?
>>
>> And before 100 people tell me that is not the proper way to use a
>> link, please don't. I know this, but I have a client that wants this.
>> I told them it should be a button, but they want it to be a link, and
>> they are paying.
> 
> While it's definitely not the recommended way, you have two issues
> in your code snippet:
> 
> 1. jQuery uses css selectors, so to access an element with the id
>     of "filterValue", you need to use $('#filterValue').
> 
> 2. Your code will replace the current page content with the return
>     value of your expression. To avoid this, you need to prefix it
>     with the void operator.
> 
> <a href="javascript:void $('#filterValue').val('POR');">POR</a>
> should work like a charm.

The value of the `href' attribute must be an URI [1].  URIs must not contain 
the space character verbatim [2].  Therefore, you can either write

  <a href="javascript:void%20$('#filterValue').val('POR')">POR</a>

or

  <a href="javascript:void(('#filterValue').val('POR'))">POR</a>

(As `void' is an operator and not a function, a trailing `;' makes no sense 
to me here.  This is also one of the rare cases where an operation must be 
written like a function call to keep the code better readable, or only 
shorter.)

However, either code is not only not recommended, it is positively harmful 
to both the author and the visitor of the Web site, and therefore strongly 
recommended against [3].

The proper way to run script code upon user interaction is – since at least 
HTML 4.01 (1999/2000) – with event-handler attributes or, in general, event 
listener code [4, 5].  The usually more efficient and less error-prone code 
is (watch for word-wrap):

  <a href="#"
     onclick="document.getElementById('filterValue').firstChild.nodeValue = 
'POR'; return false">POR</a>

Or, if you prefer greater overall efficiency and reliability with greater 
complexity:

    …
    <script type="text/javascript">
      var filterValue;

      function body_load ()
      {
        var link = document.getElementById("myLink");
        link.onclick = function () {
          if (typeof filterValue == "undefined")
          {
            filterValue = document.getElementById("filterValue");
          }

          filterValue.firstChild.nodeValue = "POR";

          return false;
        };
      }
    </script>
  </head>

  <body onload="body_load()">
    <a href="#" id="myLink">…</a>
  </body>

(In this case, the `a' element as a whole should be generated with scripting 
-- e. g., document.write(…) -- as it would be unusable without.  However, if 
there is a reasonable alternative for the user without scripting, it should 
additionally be referred in the `href' attribute value instead.  If the `a' 
element can only be used with scripting, it should also be considered for 
change into a proper form control, like `button' [6].  CSS can be applied to 
buttons to make them look like textual hyperlinks in most widely distributed 
browsers.)

However, jQuery also offers a faster written, but considerably less 
efficient and more error-prone alternative [7]:

  jQuery(function (j) {
    j('#filterValue').click(function (j) {
      j(this).value('POR');
    });
  });

This might be the only way to make this work in a jQuery-powered Web 
application as in my experience jQuery manipulates the `onload' attribute 
and `onload' property value so that it cannot be used.

It can be observed that the main (only?) jQuery author is still lacking 
basic understanding of the Document Object Model API as implemented in
Web browsers, and the use-cases for Web browsers [8, 9].  Therefore,
jQuery (and jQuery-related extensions) should not be used in a production 
environment, particularly not on a public Web site which may be exposed to 
any user agent.

Unfortunately, there are still people who are lacking the most basic 
programming skills and therefore have come to think they absolutely need 
jQuery (or any script library) even for the most simple programming tasks 
[10].

_______
 [1] <http://www.w3.org/TR/html4/struct/links.html#adef-href>
 [2] <http://tools.ietf.org/html/rfc3986#section-2>
 [3] <http://jibbering.com/faq/#javascriptURI>
 [4] <http://www.w3.org/TR/html4/interact/scripts.html#h-18.2.3>
 [5] <http://www.w3.org/TR/DOM-Level-2-Events/>
 [6] <http://www.w3.org/TR/html4/interact/forms.html>
 [7] <http://api.jquery.com/ready/>
 [8] <http://api.jquery.com/attr/>
 [9] <http://jquery.com/>, point to "Cross-browser"
[10] <http://www.doxdesk.com/updates/2009.html#u20091116-jquery>
-- 
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
  -- Richard Cornford, cljs, <f806at$ail$1$8300dec7@news.demon.co.uk>

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

Setting a text field's value from a href "Larry.Martell@gmail.com" <larry.martell@gmail.com> - 2012-03-09 06:18 -0800
  Re: Setting a text field's value from a href SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> - 2012-03-09 16:23 +0100
    Re: Setting a text field's value from a href SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> - 2012-03-09 16:30 +0100
      Re: Setting a text field's value from a href "Larry.Martell@gmail.com" <larry.martell@gmail.com> - 2012-03-09 07:48 -0800
    Re: Setting a text field's value from a href "Larry.Martell@gmail.com" <larry.martell@gmail.com> - 2012-03-09 07:31 -0800
      Re: Setting a text field's value from a href SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> - 2012-03-09 18:50 +0100
        Re: Setting a text field's value from a href SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> - 2012-03-09 19:01 +0100
    Re: Setting a text field's value from a href Jake Jarvis <pig_in_shoes@yahoo.com> - 2012-03-09 17:59 +0100
  Re: Setting a text field's value from a href Gene Wirchenko <genew@ocis.net> - 2012-03-09 09:06 -0800
    Re: Setting a text field's value from a href "Larry.Martell@gmail.com" <larry.martell@gmail.com> - 2012-03-09 09:24 -0800
      Re: Setting a text field's value from a href Gene Wirchenko <genew@ocis.net> - 2012-03-09 12:42 -0800
        Re: Setting a text field's value from a href "Larry.Martell@gmail.com" <larry.martell@gmail.com> - 2012-03-09 13:12 -0800
  Re: Setting a text field's value from a href Christian Winter <thepoet_nospam@arcor.de> - 2012-03-09 19:05 +0100
    Re: Setting a text field's value from a href "Larry.Martell@gmail.com" <larry.martell@gmail.com> - 2012-03-09 10:51 -0800
    Re: Setting a text field's value from a href Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-03-09 20:55 +0100
      Re: Setting a text field's value from a href "Larry.Martell@gmail.com" <larry.martell@gmail.com> - 2012-03-09 13:02 -0800
        Re: Setting a text field's value from a href Dr J R Stockton <reply1210@merlyn.demon.co.uk> - 2012-03-10 21:09 +0000
        Re: Setting a text field's value from a href David Mark <dmark.cinsoft@gmail.com> - 2012-03-12 16:32 -0700
          Re: Setting a text field's value from a href "Larry.Martell@gmail.com" <larry.martell@gmail.com> - 2012-03-13 10:07 -0700
            Re: Setting a text field's value from a href David Mark <dmark.cinsoft@gmail.com> - 2012-03-13 10:43 -0700
              Re: Setting a text field's value from a href "Mel Smith" <med_cutout_syntel@aol.com> - 2012-03-13 11:09 -0700
                Re: Setting a text field's value from a href Gene Wirchenko <genew@ocis.net> - 2012-03-13 12:25 -0700
                Re: Setting a text field's value from a href "Larry.Martell@gmail.com" <larry.martell@gmail.com> - 2012-03-13 15:18 -0700
                Re: Setting a text field's value from a href Barry Margolin <barmar@alum.mit.edu> - 2012-04-25 16:53 -0400
  Re: Setting a text field's value from a href Denis McMahon <denismfmcmahon@gmail.com> - 2012-03-10 00:20 +0000
    Re: Setting a text field's value from a href Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-03-10 01:44 +0100
      Re: Setting a text field's value from a href SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> - 2012-03-10 09:58 +0100
        Re: Setting a text field's value from a href David Mark <dmark.cinsoft@gmail.com> - 2012-03-12 16:33 -0700

csiph-web