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

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

Matching arbitrary pairs of elements

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

Contents

  Matching arbitrary pairs of elements real-not-anti-spam-address@apple-juice.co.uk (D.M. Procida) - 2013-01-08 19:41 +0000
    Re: Matching arbitrary pairs of elements Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-01-09 00:36 +0100
      Re: Matching arbitrary pairs of elements real-not-anti-spam-address@apple-juice.co.uk (D.M. Procida) - 2013-01-09 11:46 +0000
        Re: Matching arbitrary pairs of elements Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-01-09 18:24 +0100
      Re: Matching arbitrary pairs of elements John G Harris <niam@jghnorth.org.invalid> - 2013-01-09 16:34 +0000
    Re: Matching arbitrary pairs of elements "Leonardo Azpurua" <leonardo@exmvps.org> - 2013-01-08 23:11 -0430
      Re: Matching arbitrary pairs of elements Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-01-16 12:49 +0100
        Re: Matching arbitrary pairs of elements Tim Streater <timstreater@greenbee.net> - 2013-01-16 12:47 +0000
          Re: Matching arbitrary pairs of elements Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-01-16 14:27 +0100
            Re: Matching arbitrary pairs of elements Tim Streater <timstreater@greenbee.net> - 2013-01-16 13:52 +0000
              Re: Matching arbitrary pairs of elements Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-01-16 18:48 +0100
                Re: Matching arbitrary pairs of elements Tim Streater <timstreater@greenbee.net> - 2013-01-16 17:58 +0000
                Re: Matching arbitrary pairs of elements John G Harris <niam@jghnorth.org.invalid> - 2013-01-17 14:30 +0000
    Re: Matching arbitrary pairs of elements Jeff North <jnorthau@yahoo.com.au> - 2013-01-10 13:11 +1100
    Re: Matching arbitrary pairs of elements real-not-anti-spam-address@apple-juice.co.uk (D.M. Procida) - 2013-01-11 10:32 +0000
      Re: Matching arbitrary pairs of elements RobG <rgqld@iinet.net.au> - 2013-01-13 22:36 -0800

#18022 — Matching arbitrary pairs of elements

I am trying to create a widget that when a certain option in a <select>
is chosen, a previously-hidden input field is shown.

So far I have managed to come up with http://jsfiddle.net/j2xYs/ - which
works, for one pair of select/input elements.

Now in my interface there will be an arbitrary number of these pairs,
with matching numbered ids.

What I'd like to do is amend my JS so that if <select id="[number]"> is
changed to "show", then <input id="[number]"> will be shown, whatever
[number] is.

I'm sure this must be possible, but this is the first time I've tried to
do something in JS so I am not really sure where to start.

Thanks for any suggestions or advice,

Daniele
-- 
Kraftwerk Consolation Night
20.00 1st March 2013 Chapter Arts Centre Cardiff
Eight different live ensembles playing the songs of Kraftwerk to ease 
the disappointment of being unable to get tickets to see them in London

[toc] | [next] | [standalone]

#18024

D.M. Procida wrote:

> So far I have managed to come up with http://jsfiddle.net/j2xYs/ - which
> works, for one pair of select/input elements.

This is not the Web.  Surely you can also post a reduced test case here.

See <http://jibbering.com/faq/#posting> or 
<http://PointedEars.de/faq#posting>.
 
> Now in my interface there will be an arbitrary number of these pairs,
> with matching numbered ids.
> 
> What I'd like to do is amend my JS so that if <select id="[number]"> is
> changed to "show", then <input id="[number]"> will be shown, whatever
> [number] is.

Only if you declare and use HTML5, IDs are allowed to start with “[”.  
Otherwise they MUST NOT contain the “[” or “]” characters, and MUST NOT 
start with a decimal digit either.

<http://www.w3.org/TR/1999/REC-html401-19991224/types.html#h-6.2>
<http://www.w3.org/TR/2012/CR-html5-20121217/dom.html#the-id-attribute>

If you are not declaring and using HTML5, you could use the “name” 
attribute, though, which is backwards-compatible and allows both “[” and 
“]”, because it is of type CDATA.  (The “name” attribute is allowed for 
“form” elements and form controls in HTML5 as well.  However, for form 
controls HTML5 attaches special meaning to it.)

<http://www.w3.org/TR/1999/REC-html401-19991224/interact/forms.html#adef-
name-INPUT>
<http://www.w3.org/TR/2012/CR-html5-20121217/forms.html#attr-fe-name>

> I'm sure this must be possible, but this is the first time I've tried to
> do something in JS so I am not really sure where to start.

You could start like this:

  <select id="select1"
    onchange="console.log([this.id, 
this.options[this.selectedIndex].value].join('\n'))">
    <option value="hide">hide</option>
    <option value="show">show</option>
  </select>

(You should remove word-wrap in your code.)

However, if there are only two choices, it is probably better to use a 
checkbox instead (and for three choices a radiobutton group, unless space is 
limited).  See <https://developer.mozilla.org/en/docs/DOM> for more.
 
> Thanks for any suggestions or advice,

You are welcome.

> Daniele

You should put that in the sender (“From” header field value), too.

-- 
PointedEars

Twitter: @PointedEars2
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

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

#18032

Thomas 'PointedEars' Lahn <PointedEars@web.de> wrote:

> D.M. Procida wrote:
> 
> > So far I have managed to come up with http://jsfiddle.net/j2xYs/ - which
> > works, for one pair of select/input elements.
> 
> This is not the Web.  Surely you can also post a reduced test case here.

I wanted to show a working example.

> > What I'd like to do is amend my JS so that if <select id="[number]"> is
> > changed to "show", then <input id="[number]"> will be shown, whatever
> > [number] is.
> 
> Only if you declare and use HTML5, IDs are allowed to start with "[".
> Otherwise they MUST NOT contain the "[" or "]" characters, and MUST NOT
> start with a decimal digit either.

Of course, by "[number]" I just meant some number.

> > I'm sure this must be possible, but this is the first time I've tried to
> > do something in JS so I am not really sure where to start.
> 
> You could start like this:
> 
>   <select id="select1"
>     onchange="console.log([this.id, 
> this.options[this.selectedIndex].value].join('\n'))">
>     <option value="hide">hide</option>
>     <option value="show">show</option>
>   </select>

Thanks, I'll plug it into the code and play around.

> However, if there are only two choices, it is probably better to use a
> checkbox instead (and for three choices a radiobutton group, unless space is
> limited).

No, there will be arbitrary choices, but typically half a dozen.

Daniele

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

#18034

D.M. Procida wrote:

> Thomas 'PointedEars' Lahn <PointedEars@web.de> wrote:
>> D.M. Procida wrote:
>> > So far I have managed to come up with http://jsfiddle.net/j2xYs/ -
>> > which works, for one pair of select/input elements.
>> 
>> This is not the Web.  Surely you can also post a reduced test case here.
                                        ^^^^ 
> I wanted to show a working example.

Which is a good idea, but not sufficient.  Besides, if you had really used 
jQuery, it is debatable if one could reasonably call such an example 
“working”.

>> > What I'd like to do is amend my JS so that if <select id="[number]"> is
>> > changed to "show", then <input id="[number]"> will be shown, whatever
>> > [number] is.
>> 
>> Only if you declare and use HTML5, IDs are allowed to start with "[".
>> Otherwise they MUST NOT contain the "[" or "]" characters, and MUST NOT
>> start with a decimal digit either.
> 
> Of course, by "[number]" I just meant some number.

As “some number” will, without loss of generality, be a decimal number, it 
will start with a decimal digit.  So unless you are declaring and using 
HTML5, you will need to prefix at least one “_” or ASCII letter to it, as I 
did in my example.

<http://validator.w3.org/>
 
-- 
PointedEars

Twitter: @PointedEars2
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

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

#18033

In message <2021719.oBrLI1RlBM@PointedEars.de>, Thomas 'PointedEars'
Lahn wrote:

  <snip>
>See <http://jibbering.com/faq/#posting> or
><http://PointedEars.de/faq#posting>.
  <snip>

This is not the web. Surely you can also post a reduced extract here.

  John
-- 
John Harris

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

#18028

"D.M. Procida" <real-not-anti-spam-address@apple-juice.co.uk> escribió en el 
mensaje 
news:1kwe933.qjka3b5vluq5N%real-not-anti-spam-address@apple-juice.co.uk...
>I am trying to create a widget that when a certain option in a <select>
> is chosen, a previously-hidden input field is shown.
>
> So far I have managed to come up with http://jsfiddle.net/j2xYs/ - which
> works, for one pair of select/input elements.
>
> Now in my interface there will be an arbitrary number of these pairs,
> with matching numbered ids.
>
> What I'd like to do is amend my JS so that if <select id="[number]"> is
> changed to "show", then <input id="[number]"> will be shown, whatever
> [number] is.
>
> I'm sure this must be possible, but this is the first time I've tried to
> do something in JS so I am not really sure where to start.
>
> Thanks for any suggestions or advice,
>
> Daniele

Hi,

You seem to be using jQuery and I don't have the faintest idea of how that 
works.

If I had to solve your problem, I would probably write a class (function) to 
handle it.

Not sure that it would work, since I am also a newcomer to Web development, 
but it's likely that this is the way:

function widgetPair(selWidget, textWidget)
{
    this.sel = selWidget;
    this.txt = textWidget;
    this.sel.style.display = "block";
    this.txt.style.display = "none";
    this.sel.addEventListener("change", this.showHideText, false);
}

widgetPair.prototype.showHideText = function () {
        if (this.sel.value = "SHOW")
        {
            this.txt.style.display = "block";
        }
        else {
            this.txt.style.display = "none";
        }
    };

Then, if you have several pairs like this, you can write:

p1 = new widgetPair(forms[0].getElementByName("select1"),
                                 forms[0].getElementByName("text12"));
p2 = new widgetPair(forms[0].getElementByName("select5"),
                                 forms[1].getElementByName("textNoNumber"));

and that would be all... perhaps.

--

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

#18107

Leonardo Azpurua wrote:

> "D.M. Procida" <real-not-anti-spam-address@apple-juice.co.uk> escribi� en
> el mensaje
> news:1kwe933.qjka3b5vluq5N%real-not-anti-spam-address@apple-juice.co.uk...

It is supposed to be an attribution _line_, not a novel.

The non-ASCII characters that you intended to post are undeclared as being 
such characters, which is why they are displayed garbled (unless guessed by 
a newsreader correctly, outside of the protocol specification).

Please read and apply <http://insideoe.com/>, or get a better posting agent, 
like <http://getthunderbird.com/>.

>> I am trying to create a widget that when a certain option in a <select>
>> is chosen, a previously-hidden input field is shown.
>> […]
> 
> […]
> If I had to solve your problem, I would probably write a class (function)
> to handle it.
> 
> Not sure that it would work, since I am also a newcomer to Web
> development, but it's likely that this is the way:
> 
> function widgetPair(selWidget, textWidget)

Constructor identifiers should start with a capital letter, to distinguish 
them from those of other functions.

> {
>     this.sel = selWidget;
>     this.txt = textWidget;
>     this.sel.style.display = "block";
>     this.txt.style.display = "none";

In real code, the target *element* initialization should be moved to a 
separate method, so that this method can be called on a need-to-use basis 
that allows for inheritance:

<http://PointedEars.de/websvn/filedetails.php?repname=JSX&path=%2Ftrunk%2Fdom%2Fwidgets.js>

It is better to use "" instead of "block", so that the property value can 
revert to its initial value, independent of element type.  This requires, of 
course, that the “display” property is not set by default, which is 
recommended for compatibility/usability.

>     this.sel.addEventListener("change", this.showHideText, false);

You should consider that the control to be wrapped may have a listener added 
already, either implictly through an event-handler attribute or explicitly 
through (the equivalent) of addEventListener().

> }
> 
> widgetPair.prototype.showHideText = function () {
>         if (this.sel.value = "SHOW")

It appears to be prudent to avoid all-uppercase element type names, 
attribute names, and values.  All-uppercase character strings should be 
reserved for identifiers of constants and constant-like entities.

The “value” property of “select” element objects is not implemented in a 
compatible way: It may be the value of the “value” attribute of the selected 
“option” element, or it may be its text content.

For a compatible approach, use

  this.sel[this.selectedIndex].value

and consider that “this.selectedIndex” may result in -1 if nothing has been 
selected, in which case the second-to-last property access would result in a 
runtime error or “undefined”.

>         {
>             this.txt.style.display = "block";

See above.

> […]
> Then, if you have several pairs like this, you can write:
> 
> p1 = new widgetPair(forms[0].getElementByName("select1"),

var p1 = …

>                                  forms[0].getElementByName("text12"));

References should be qualified:

  document.forms[0].…

<https://developer.mozilla.org/en-US/docs/DOM/document.forms> p.

> p2 = new widgetPair(forms[0].getElementByName("select5"),

The method identifier is getElement*s*ByName(); the method returns a 
NodeList or HTMLCollection, and is not available on non-HTMLDocument 
objects.

<https://developer.mozilla.org/en-US/docs/DOM/form> p.

If HTML form controls are accessed by name via their forms, the form 
object's “elements” collection should be used:

  document.forms[0].elements["select5"]

This avoids a non-native method call and limits the target objects to form 
controls, which is potentially faster (shorter hash table).

Note that the result is a NodeList if there are more controls with the same 
name in that form.  This backwards-compatible cross-implementation behavior 
has been formally specified in the W3C Candidate Recommendation for HTML5.

<https://developer.mozilla.org/en-US/docs/DOM/form.elements> p.

>                                forms[1].getElementByName("textNoNumber"));
> 
> and that would be all... perhaps.

The OP asked about a way to use *one* “select” element to define the display 
of several other controls, though.  This can be facilitated with proper 
values and naming (as I showed in my example), and makes a wrapper object 
and on-load initialization unnecessary, however not per se superfluous.

-- 
PointedEars

Twitter: @PointedEars2
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

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

#18108

In article <2441513.NidSsCbtjZ@PointedEars.de>,
 Thomas 'PointedEars' Lahn <PointedEars@web.de> wrote:

> Leonardo Azpurua wrote:
> 
> > "D.M. Procida" <real-not-anti-spam-address@apple-juice.co.uk> escribi? en
> > el mensaje
> > news:1kwe933.qjka3b5vluq5N%real-not-anti-spam-address@apple-juice.co.uk...
> 
> It is supposed to be an attribution _line_, not a novel.

Your attribution line is worthless because I can't double-click on it 
and thereby pull up the previous article in its entirety.

-- 
Tim

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

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

#18109

Tim Streater wrote:

>  Thomas 'PointedEars' Lahn <PointedEars@web.de> wrote:
>> Leonardo Azpurua wrote:
>> > "D.M. Procida" <real-not-anti-spam-address@apple-juice.co.uk> escribi?
>> > en el mensaje
>> > news:1kwe933.qjka3b5vluq5N%real-not-anti-spam-address@apple-
juice.co.uk...
>> 
>> It is supposed to be an attribution _line_, not a novel.
> 
> Your attribution line is worthless because I can't double-click on it
> and thereby pull up the previous article in its entirety.

Without implying that your newsreader would be state-of-the-art (for a 
start, its development has ceased approximately 5 years ago, and you are 
using the latest available beta version):

What exactly happens if you double-click attribution novels?

-- 
PointedEars

Twitter: @PointedEars2
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

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

#18110

In article <1522535.knIXBJrhn8@PointedEars.de>,
 Thomas 'PointedEars' Lahn <PointedEars@web.de> wrote:

> Tim Streater wrote:
> 
> >  Thomas 'PointedEars' Lahn <PointedEars@web.de> wrote:
> >> Leonardo Azpurua wrote:
> >> > "D.M. Procida" <real-not-anti-spam-address@apple-juice.co.uk> escribi?
> >> > en el mensaje
> >> > news:1kwe933.qjka3b5vluq5N%real-not-anti-spam-address@apple-
> juice.co.uk...
> >> 
> >> It is supposed to be an attribution _line_, not a novel.
> > 
> > Your attribution line is worthless because I can't double-click on it
> > and thereby pull up the previous article in its entirety.
> 
> Without implying that your newsreader would be state-of-the-art (for a 
> start, its development has ceased approximately 5 years ago, and you are 
> using the latest available beta version):

Yes and it has a number of bugs, unfortunately. 

> What exactly happens if you double-click attribution novels?

Sorry, I should have said cmd-click, not double-click. If I do that on 
the message reference 1522535.knIXBJrhn8@PointedEars.de (as if I were 
reading this post, for example), then your attributed post opens in 
another window.

That is useful if someone has only quoted portions of it and I want to 
see it in its entirety. And I can repeat that process for as long as 
posters have (if they have the option to) provided that sort of 
attribution or the servers have the article in question.

-- 
Tim

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

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

#18112

Tim Streater wrote:

> Thomas 'PointedEars' Lahn <PointedEars@web.de> wrote:
>> What exactly happens if you double-click attribution novels?
> 
> Sorry, I should have said cmd-click, not double-click. If I do that on
> the message reference 1522535.knIXBJrhn8@PointedEars.de (as if I were
> reading this post, for example), then your attributed post opens in
> another window.
> 
> That is useful if someone has only quoted portions of it and I want to
> see it in its entirety. And I can repeat that process for as long as
> posters have (if they have the option to) provided that sort of
> attribution or the servers have the article in question.

I find it hard to believe that the newsreader that you are using would not 
allow you to select the previous posting.  It just can't be that bad; if it 
really is, it just does not qualify as newsreader.  So that is hardly a good 
argument for insisting on the creation of unreadable discussions.  See 
below.

The same newsreader, although it has its comparably low limits, has at least 
a shortcut to open all References, regardless whether the precursor's 
Message-ID was included in the message body:

<http://www.smfr.org/mtnw/docs/Commands.html#Open_All_References>

Better newsreaders, even some that are available for your OS, provide a link 
list of References or equivalent solutions.  For example:

<https://addons.mozilla.org/en-us/thunderbird/addon/mnenhy/>
<http://www.kde.org/images/screenshots/knode.png>

So there is actually no need to include Message-IDs in NetNews articles 
except for citing other articles (buried in the same long thread or being 
off-thread).

What is necessary only is to give proper attribution, so that one can see at 
a glance *who* wrote *what* was quoted, at *each* quotation level.  Combine 
with that basic requirement an attribution that is or becomes, through 
quoting, longer than one line, because of secondary e-mail addresses, 
Message-IDs, dates, or “funny” text, and discussions very quickly become 
hard to read.  The record shows.

HTH.

F'up2 poster because it is off-topic.

-- 
PointedEars

Twitter: @PointedEars2
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

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

#18113

In article <9449075.6aSkGqhPIQ@PointedEars.de>,
 Thomas 'PointedEars' Lahn <PointedEars@web.de> wrote:

> Tim Streater wrote:
> 
> > Thomas 'PointedEars' Lahn <PointedEars@web.de> wrote:
> >> What exactly happens if you double-click attribution novels?
> > 
> > Sorry, I should have said cmd-click, not double-click. If I do that on
> > the message reference 1522535.knIXBJrhn8@PointedEars.de (as if I were
> > reading this post, for example), then your attributed post opens in
> > another window.
> > 
> > That is useful if someone has only quoted portions of it and I want to
> > see it in its entirety. And I can repeat that process for as long as
> > posters have (if they have the option to) provided that sort of
> > attribution or the servers have the article in question.
> 
> I find it hard to believe that the newsreader that you are using would not 
> allow you to select the previous posting.  It just can't be that bad; if it 
> really is, it just does not qualify as newsreader.  So that is hardly a good 
> argument for insisting on the creation of unreadable discussions.  See 
> below.

I don't find them unreadable. Perhaps you need new glasses.

> The same newsreader, although it has its comparably low limits, has at least 
> a shortcut to open all References, regardless whether the precursor's 
> Message-ID was included in the message body:
> 
> <http://www.smfr.org/mtnw/docs/Commands.html#Open_All_References>

This is useful, doubtless, but I prefer to open them one at a time.

> Better newsreaders, even some that are available for your OS, provide a link 
> list of References or equivalent solutions.  For example:
> 
> <https://addons.mozilla.org/en-us/thunderbird/addon/mnenhy/>
> <http://www.kde.org/images/screenshots/knode.png>

I tried thunderbird and found it to be awful and irritating. There are 
some irritating things about MT-NW, but considerably fewer.

-- 
Tim

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

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

#18126

In message <9449075.6aSkGqhPIQ@PointedEars.de>, Thomas 'PointedEars'
Lahn wrote:
>Tim Streater wrote:

It is supposed to be an *attribution* line, that is to say, a line that
says *where* the quotation came from.

Saying
  Tim Streater wrote:
is not an attribution, it is merely a summary for management.


And I'm ignoring your Followup-To: as you're trying to change the rules
for the use of a comp.* news group. That is not a private matter.

  John

-- 
John Harris

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

#18048

On Tue, 8 Jan 2013 19:41:52 +0000, in comp.lang.javascript
real-not-anti-spam-address@apple-juice.co.uk (D.M. Procida)
<1kwe933.qjka3b5vluq5N%real-not-anti-spam-address@apple-juice.co.uk>
wrote:

>| I am trying to create a widget that when a certain option in a <select>
>| is chosen, a previously-hidden input field is shown.
>| 
>| So far I have managed to come up with http://jsfiddle.net/j2xYs/ - which
>| works, for one pair of select/input elements.
>| 
>| Now in my interface there will be an arbitrary number of these pairs,
>| with matching numbered ids.
>| 
>| What I'd like to do is amend my JS so that if <select id="[number]"> is
>| changed to "show", then <input id="[number]"> will be shown, whatever
>| [number] is.
>| 
>| I'm sure this must be possible, but this is the first time I've tried to
>| do something in JS so I am not really sure where to start.
>| 
>| Thanks for any suggestions or advice,
>| 
>| Daniele

You just need to rethink what you are trying to do. Using the example
that you have in jsFiddle you need to change the js to:
$(document).ready(function() {
	//--- hide the elements first incase js isn't disabled
  //--- get each select element on the form
	$('select').each(function(index, element) {
   //--- locate the sub-div
	 var p = this.parentNode.children[2];
	 $(p).toggle();	//-- hide sub-div
	});
	//--- now add the onChange event handling
	$('select').change(function() {
   //--- locate the sub-div
	 var p = this.parentNode.children[2];
	 $(p).toggle();	//--- show/hide it
	});
});

Why children[2]: the label is 0, select is 1 and div is 2
and change your html to:
<div>
   <label for="show-hide-0" class="required">Show/hide</label>
   <select name="show-hide-0" id="show-hide-0">
      <option value="hide" selected="selected">hide</option>
      <option value="show">show</option>
   </select>
   <div>
      <label for="shown-hidden-0" class="inline">Shown 1: </label>
      <input id="shown-hidden-0" type="text" name="shown-hidden-0"
maxlength="255" />
   </div>
</div>

Provided you don't put any select elements into the secondary div then
all should work accordingly.

jQueryUI accordion might be more appropriate for your widget.

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

#18069

D.M. Procida <real-not-anti-spam-address@apple-juice.co.uk> wrote:

> I am trying to create a widget that when a certain option in a <select>
> is chosen, a previously-hidden input field is shown.

Thanks for the replies.

I've got a working solution: <http://jsfiddle.net/GudQP/22/>

The JavaScript I needed was:

// hide the input_url field by default
$('div[class|="form-row field-input_url"]').hide();

// when the select is changed:
$('select[id|="id_links_item"]').on('change', function () {
  // get the value of the select
  var $this = $(this),
    val = $this.val();
  // should we hide or display?
  if (val == "40") {
    var hideshow = "block";
  } else {
    var hideshow = "hide";
  };

  // find the relevant input_url field, and apply the 
  // hide/show CSS value
  $this.closest('div[class|="form-row
field-destination_content_type"]').nextAll('div[class|="form-row
field-input_url"]').css('display', hideshow);
});

Daniele
-- 
Kraftwerk Consolation Night
20.00 1st March 2013 Chapter Arts Centre Cardiff
Eight different live ensembles playing the songs of Kraftwerk to ease 
the disappointment of being unable to get tickets to see them in London

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

#18103

On Friday, January 11, 2013 8:32:36 PM UTC+10, D.M. Procida wrote:
> D.M. Procida <real-not-anti-spam-address@apple-juice.co.uk> wrote:
> 
> > I am trying to create a widget that when a certain option in a <select>
> > is chosen, a previously-hidden input field is shown.
> 
> Thanks for the replies.
> 
> I've got a working solution: <http://jsfiddle.net/GudQP/22/>
> 
> The JavaScript I needed was:

You mean the javascript you decided to use.

> 
> // hide the input_url field by default
> 
> $('div[class|="form-row field-input_url"]').hide();
> 
> // when the select is changed:
> $('select[id|="id_links_item"]').on('change', function () {
> 
>   // get the value of the select
> 
>   var $this = $(this),
> 
>     val = $this.val();
> 
>   // should we hide or display?
> 
>   if (val == "40") {
> 
>     var hideshow = "block";
> 
>   } else {
> 
>     var hideshow = "hide";
> 
>   };

Your original issue was to identify a related element when the value of a select element is changed. If you use an ID to relate the elements (or name since they are form controls) then the issue is much simpler. E.g. since there are a number of these, you might have:

    <select name="select-0"...>
        ...
    </select>

    <input name="input-0"...>

Then the listener can be something like:

    var inputID = 'input' + this.id.split('-')[1];
    document.getElementById(inputID).style.display = this.value == 40? '' : 'none'; 

or if you use a name:

    var inputName = 'input' + this.name.split('-')[1];
    this.form[inputName].style.display = this.value == 40? '' : 'none'; 

You can apply a similar approach to the rest of it.


>   // find the relevant input_url field, and apply the 
>   // hide/show CSS value
>   $this.closest('div[class|="form-row
> 
> field-destination_content_type"]').nextAll('div[class|="form-row
> field-input_url"]').css('display', hideshow);
> });

Using a selector as you have means that if document layout changes, your code may or may not break depending on the type of change. That may be difficult to find and debug.

-- 
Rob

[toc] | [prev] | [standalone]

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

csiph-web