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

Groups > comp.lang.javascript > #25632 > unrolled thread

element content change

Back to article view | Back to comp.lang.javascript

Contents

  element content change teddybubu@gmail.com - 2014-08-05 17:05 -0700
    Re: element content change Andrew Poulos <ap_prog@hotmail.com> - 2014-08-06 11:23 +1000
      Re: element content change Ben Bacarisse <ben.usenet@bsb.me.uk> - 2014-08-06 02:47 +0100
        Re: element content change "Jukka K. Korpela" <jkorpela@cs.tut.fi> - 2014-08-06 06:47 +0300
          Re: element content change Ben Bacarisse <ben.usenet@bsb.me.uk> - 2014-08-06 20:27 +0100
        Re: element content change "Christoph M. Becker" <cmbecker69@arcor.de> - 2014-08-06 15:16 +0200
          Re: element content change Ben Bacarisse <ben.usenet@bsb.me.uk> - 2014-08-06 20:37 +0100
            Re: element content change "Jukka K. Korpela" <jkorpela@cs.tut.fi> - 2014-08-06 23:19 +0300
              Re: element content change Ben Bacarisse <ben.usenet@bsb.me.uk> - 2014-08-06 21:54 +0100
                Re: element content change Ben Bacarisse <ben.usenet@bsb.me.uk> - 2014-08-06 21:59 +0100
              Re: element content change "Christoph M. Becker" <cmbecker69@arcor.de> - 2014-08-07 00:59 +0200
                Re: element content change "Jukka K. Korpela" <jkorpela@cs.tut.fi> - 2014-08-07 08:28 +0300
                  Re: element content change Ben Bacarisse <ben.usenet@bsb.me.uk> - 2014-08-07 11:42 +0100
                  Re: element content change "Christoph M. Becker" <cmbecker69@arcor.de> - 2014-08-08 18:48 +0200
            Re: element content change "Christoph M. Becker" <cmbecker69@arcor.de> - 2014-08-07 00:54 +0200
    Re: element content change teddybubu@gmail.com - 2014-08-05 19:36 -0700
      Re: element content change Hans-Georg Michna <hans-georgNoEmailPlease@michna.com> - 2014-08-06 08:52 +0200
    Re: element content change Denis McMahon <denismfmcmahon@gmail.com> - 2014-08-06 12:52 +0000
    Re: element content change teddybubu@gmail.com - 2014-08-06 05:58 -0700

#25632 — element content change

Hello,
I can't ask this in the jquery forum so I came here.
Sorry for the mixup. 
I want to add content to an html input using javascript/jquery but I can not seem to make it work.

<input type="text" id="city"/> <br/>

When the DOM loads, I want this to happen:

<input type="text" id="city"/> City<br/>

Basically the City will be next to the input box as a label.
Why won't this work?
$('#city').change('City'); 
or 
$('#city').val('City');

[toc] | [next] | [standalone]

#25633

On 6/08/2014 10:05 AM, teddybubu@gmail.com wrote:
> Hello,
> I can't ask this in the jquery forum so I came here.
> Sorry for the mixup.
> I want to add content to an html input using javascript/jquery but I can not seem to make it work.
>
> <input type="text" id="city"/> <br/>
>
> When the DOM loads, I want this to happen:
>
> <input type="text" id="city"/> City<br/>
>
> Basically the City will be next to the input box as a label.
> Why won't this work?
> $('#city').change('City');
> or
> $('#city').val('City');


If
   <input type="text" id="city" value="">
then (once the input is ready)
   document.getElementById("city").value = "City";

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#25634

Andrew Poulos <ap_prog@hotmail.com> writes:

> On 6/08/2014 10:05 AM, teddybubu@gmail.com wrote:
>> Hello,
>> I can't ask this in the jquery forum so I came here.

Why not?

>> Sorry for the mixup.
>> I want to add content to an html input using javascript/jquery but I
>> can not seem to make it work.
>>
>> <input type="text" id="city"/> <br/>
>>
>> When the DOM loads, I want this to happen:
>>
>> <input type="text" id="city"/> City<br/>
>>
>> Basically the City will be next to the input box as a label.
>> Why won't this work?
>> $('#city').change('City');
>> or
>> $('#city').val('City');
>
> If
>   <input type="text" id="city" value="">
> then (once the input is ready)
>   document.getElementById("city").value = "City";

It seems the OP wants the text next to the input element.

To the OP: this may do what you want:

  var t = document.getElementById('city');
  t.parentNode.insertBefore(document.createTextNode('City'),
                            t.nextSibling);

but you should consider another approach.  It's often better to have an
element in the document that you simply fill in.  You can then move it
about as you work on the layout, style it like any other part of the
document, etc.  What's more, HTML even defines an element whose role is
to be a label for a form element: label:

  <input type=text id=city><label for=city id=citylabel></label><br>

-- 
Ben.

[toc] | [prev] | [next] | [standalone]

#25636

2014-08-06 4:47, Ben Bacarisse wrote:

> What's more, HTML even defines an element whose role is
> to be a label for a form element: label:
>
>    <input type=text id=city><label for=city id=citylabel></label><br>

(The id=citylabel attribute is usually unnecessary, unless you need a 
quick way to refer to the particular element in JavaScript or in CSS.)

And this implies some usability features that may be essential to some 
users.

What’s more, you should make sure that the label text appears in the 
HTML document, so you should generate it server side, not with 
client-side JavaScript, which seems to be what is used here. The reason 
is that when done client-side, it will not work when JavaScript is 
disabled in the browser. You should never rely on JavaScript being 
enabled unless you have to (as you have to if you are specifically 
creating an “HTML5 application” where all the functionality is coded in 
JavaScript).

-- 
Yucca, http://www.cs.tut.fi/~jkorpela/

[toc] | [prev] | [next] | [standalone]

#25643

"Jukka K. Korpela" <jkorpela@cs.tut.fi> writes:

> 2014-08-06 4:47, Ben Bacarisse wrote:
>
>> What's more, HTML even defines an element whose role is
>> to be a label for a form element: label:
>>
>>    <input type=text id=city><label for=city id=citylabel></label><br>
>
> (The id=citylabel attribute is usually unnecessary, unless you need a
> quick way to refer to the particular element in JavaScript or in CSS.)

Sure, but that's exactly the context here.

> And this implies some usability features that may be essential to some
> users.
>
> What’s more, you should make sure that the label text appears in the
> HTML document, so you should generate it server side, not with
> client-side JavaScript, which seems to be what is used here. The
> reason is that when done client-side, it will not work when JavaScript
> is disabled in the browser. You should never rely on JavaScript being
> enabled unless you have to (as you have to if you are specifically
> creating an “HTML5 application” where all the functionality is coded
> in JavaScript).

All very true and, to be honest, I thought all these thoughts but I was
too lazy to type them all up.  Thanks for being more conscientious than
I was.

-- 
Ben.

[toc] | [prev] | [next] | [standalone]

#25640

Ben Bacarisse wrote:

> Andrew Poulos <ap_prog@hotmail.com> writes:
> 
>> On 6/08/2014 10:05 AM, teddybubu@gmail.com wrote:
>>
>>> <input type="text" id="city"/> City<br/>
>>>
>>> Basically the City will be next to the input box as a label.
>>> Why won't this work?
>>> $('#city').change('City');

The jQuery.change() method does not change a value, as its name implies,
but rather binds an event handler to the "change" event.

>>> or
>>> $('#city').val('City');

That changes the value of (the value attribute) of the element, not its
content.

I suggest you get a better understanding of the DOM[1], before using
jQuery (if at all).

> To the OP: this may do what you want:
> 
>   var t = document.getElementById('city');
>   t.parentNode.insertBefore(document.createTextNode('City'),
>                             t.nextSibling);
> 
> but you should consider another approach.  It's often better to have an
> element in the document that you simply fill in.  You can then move it
> about as you work on the layout, style it like any other part of the
> document, etc.  What's more, HTML even defines an element whose role is
> to be a label for a form element: label:
> 
>   <input type=text id=city><label for=city id=citylabel></label><br>

ACK.  Or maybe better:

  <label id=citylabel><input type=text id=city> City</label><br>

as Yukka already suggested.

[1] <http://www.w3.org/DOM/>

-- 
Christoph M. Becker

[toc] | [prev] | [next] | [standalone]

#25644

"Christoph M. Becker" <cmbecker69@arcor.de> writes:
<snip>
> ACK.  Or maybe better:
>
>   <label id=citylabel><input type=text id=city> City</label><br>

That looks logically wrong to me -- a label should not include the thing
it labels.  My only back-up is the examples in[1], which all show the
control outside, with the label element containing just, well, the
label.

> as Yukka already suggested.

He seemed to be making a different point, though always including some
text in the label was part of it.

<snip>
[1]  http://www.w3.org/TR/html401/interact/forms.html#edef-LABEL
-- 
Ben.

[toc] | [prev] | [next] | [standalone]

#25645

2014-08-06 22:37, Ben Bacarisse wrote:

> "Christoph M. Becker" <cmbecker69@arcor.de> writes:
> <snip>
>> ACK.  Or maybe better:
>>
>>    <label id=citylabel><input type=text id=city> City</label><br>
>
> That looks logically wrong to me -- a label should not include the thing
> it labels.

I agree that it is illogical, but it is permitted in HTML 
specifications, has been ever since <label> was introduced.

> My only back-up is the examples in[1], which all show the
> control outside, with the label element containing just, well, the
> label.
[...]
> [1]  http://www.w3.org/TR/html401/interact/forms.html#edef-LABEL

Reading forward, you’ll see examples like

<LABEL>
    First Name
    <INPUT type="text" name="firstname">
</LABEL>

So this is a valid way, and kept valid in HTML5, but not a logical way. 
There is the practical impact that some old browsers do not support this 
way (clicking on the label text does not focus on the control) but they 
support the more logical way.

Perhaps most importantly, the more logical way is better for scripting 
and styling, since it makes the label an element. In the less logical 
way (“implicit association”), the <label> element contains both the 
label and the control.

-- 
Yucca, http://www.cs.tut.fi/~jkorpela/

[toc] | [prev] | [next] | [standalone]

#25646

"Jukka K. Korpela" <jkorpela@cs.tut.fi> writes:

> 2014-08-06 22:37, Ben Bacarisse wrote:
>
>> "Christoph M. Becker" <cmbecker69@arcor.de> writes:
>> <snip>
>>> ACK.  Or maybe better:
>>>
>>>    <label id=citylabel><input type=text id=city> City</label><br>
>>
>> That looks logically wrong to me -- a label should not include the thing
>> it labels.
>
> I agree that it is illogical, but it is permitted in HTML
> specifications, has been ever since <label> was introduced.

Yes, definitely valid.  It's only the implied meaning that I didn't
like.

>> My only back-up is the examples in[1], which all show the
>> control outside, with the label element containing just, well, the
>> label.
> [...]
>> [1]  http://www.w3.org/TR/html401/interact/forms.html#edef-LABEL
>
> Reading forward, you’ll see examples like
>
> <LABEL>
>    First Name
>    <INPUT type="text" name="firstname">
> </LABEL>

Well, what do you know?  I never noticed that!  As you say (but I'll
snip for brevity) there are reasons to avoid the "illogical" form, so I
won't be changing my practice.

<snip>
-- 
Ben.

[toc] | [prev] | [next] | [standalone]

#25647

Ben Bacarisse <ben.usenet@bsb.me.uk> writes:

> "Jukka K. Korpela" <jkorpela@cs.tut.fi> writes:
<snip useful things>
> ...  As you say (but I'll
> snip for brevity) there are reasons to avoid the "illogical" form, so I
> won't be changing my practice.

And I should have said that I did not know those reasons, so thanks.  My
comment reads as dismissive where it was not intended to.

-- 
Ben.

[toc] | [prev] | [next] | [standalone]

#25649

Jukka K. Korpela wrote:

> <LABEL>
>    First Name
>    <INPUT type="text" name="firstname">
> </LABEL>
> 
> So this is a valid way, and kept valid in HTML5, but not a logical way.
> There is the practical impact that some old browsers do not support this
> way (clicking on the label text does not focus on the control) but they
> support the more logical way.

Which browsers are you referring to?  The oldest browser I'm aware of
that is still in somewhat widespread use is IE 6, and that does properly
handle this construct (at least in standards mode--I'm not concerned
with quirks mode).

-- 
Christoph M. Becker

[toc] | [prev] | [next] | [standalone]

#25650

2014-08-07 1:59, Christoph M. Becker wrote:

> Jukka K. Korpela wrote:
>
>> <LABEL>
>>     First Name
>>     <INPUT type="text" name="firstname">
>> </LABEL>
>>
>> So this is a valid way, and kept valid in HTML5, but not a logical way.
>> There is the practical impact that some old browsers do not support this
>> way (clicking on the label text does not focus on the control) but they
>> support the more logical way.
>
> Which browsers are you referring to?  The oldest browser I'm aware of
> that is still in somewhat widespread use is IE 6, and that does properly
> handle this construct (at least in standards mode--I'm not concerned
> with quirks mode).

According to my notes, IE 6 did not support "implicit association" and 
support was added in IE 7. When I tested this long ago, I focused (no 
pun intended) on checkboxes and radio buttons, for which the 
accessibility effect is much more important.

-- 
Yucca, http://www.cs.tut.fi/~jkorpela/

[toc] | [prev] | [next] | [standalone]

#25651

"Jukka K. Korpela" <jkorpela@cs.tut.fi> writes:

> 2014-08-07 1:59, Christoph M. Becker wrote:
>
>> Jukka K. Korpela wrote:
>>
>>> <LABEL>
>>>     First Name
>>>     <INPUT type="text" name="firstname">
>>> </LABEL>
>>>
>>> So this is a valid way, and kept valid in HTML5, but not a logical way.
>>> There is the practical impact that some old browsers do not support this
>>> way (clicking on the label text does not focus on the control) but they
>>> support the more logical way.
>>
>> Which browsers are you referring to?  The oldest browser I'm aware of
>> that is still in somewhat widespread use is IE 6, and that does properly
>> handle this construct (at least in standards mode--I'm not concerned
>> with quirks mode).
>
> According to my notes, IE 6 did not support "implicit association" and
> support was added in IE 7. When I tested this long ago, I focused (no
> pun intended) on checkboxes and radio buttons, for which the
> accessibility effect is much more important.

For what it's worth, my IE6 VM (which I never thought I'd bother with
again!) behaves as you describe.

-- 
Ben.

[toc] | [prev] | [next] | [standalone]

#25654

Jukka K. Korpela wrote:

> 2014-08-07 1:59, Christoph M. Becker wrote:
> 
>> Jukka K. Korpela wrote:
>>
>>> <LABEL>
>>>     First Name
>>>     <INPUT type="text" name="firstname">
>>> </LABEL>
>>>
>>> So this is a valid way, and kept valid in HTML5, but not a logical way.
>>> There is the practical impact that some old browsers do not support this
>>> way (clicking on the label text does not focus on the control) but they
>>> support the more logical way.
>>
>> Which browsers are you referring to?  The oldest browser I'm aware of
>> that is still in somewhat widespread use is IE 6, and that does properly
>> handle this construct (at least in standards mode--I'm not concerned
>> with quirks mode).
> 
> According to my notes, IE 6 did not support "implicit association" and
> support was added in IE 7. When I tested this long ago, I focused (no
> pun intended) on checkboxes and radio buttons, for which the
> accessibility effect is much more important.

Indeed, you're right.  Thanks for the correction.  FWIW: IE 7 still
doesn't seem to support those "implicit associations" for text inputs.

-- 
Christoph M. Becker

[toc] | [prev] | [next] | [standalone]

#25648

Ben Bacarisse wrote:

> "Christoph M. Becker" <cmbecker69@arcor.de> writes:
>
>> ACK.  Or maybe better:
>>
>>   <label id=citylabel><input type=text id=city> City</label><br>
> 
> That looks logically wrong to me -- a label should not include the thing
> it labels.  My only back-up is the examples in[1], which all show the
> control outside, with the label element containing just, well, the
> label.

I have to admit that this construct is counter-intuitive, and might be
even regarded as illogical.  However, in practise it often saves some
further markup, especially the ID (which is quite convenient, if the
markup is generated), and maybe a surrounding "block-level" element.

>> as Yukka already suggested.
> 
> He seemed to be making a different point, though always including some
> text in the label was part of it.

Yes, you're right.  I've read Yukka's post to fast.

> [1]  http://www.w3.org/TR/html401/interact/forms.html#edef-LABEL

-- 
Christoph M. Becker

[toc] | [prev] | [next] | [standalone]

#25635

Thanks for the quick reply.
Is there a way to do this in Jquery?

[toc] | [prev] | [next] | [standalone]

#25637

On Tue, 5 Aug 2014 19:36:18 -0700 (PDT), teddybubu@gmail.com
wrote:

>Thanks for the quick reply.
>Is there a way to do this in Jquery?

Sure, but why would anybody want to do that? It would be like
putting your trousers on with nipper pliers. jQuery is fat and
slow, not to mention its other defects.

The JavaScript code works even if other parts of the page use
jQuery (which they shouldn't do either, but that's another
matter).

Note that this newsgroup does not deal with jQuery, so it makes
little sense to ask jQuery-related questions here.

Hans-Georg

[toc] | [prev] | [next] | [standalone]

#25638

On Tue, 05 Aug 2014 17:05:20 -0700, teddybubu wrote:

> I can't ask this in the jquery forum so I came here.
> Why won't this work?
> [jquery stuff]

I have no idea, I never use jquery (and I suspect most people in here 
don't),you really should ask in a jquery forum.

-- 
Denis McMahon, denismfmcmahon@gmail.com

[toc] | [prev] | [next] | [standalone]

#25639

Ok Thanks everyone.

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web