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

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

Prevent Drop-downs from showing

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

Contents

  Prevent Drop-downs from showing DrKen <javajedi2@yahoo.com> - 2014-11-06 19:34 -0800
    Re: Prevent Drop-downs from showing "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2014-11-07 08:52 +0100
      Re: Prevent Drop-downs from showing Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-11-07 13:56 +0100
      Re: Prevent Drop-downs from showing Joao Rodrigues <groups_jr-1@yahoo.com.br> - 2014-11-07 15:53 -0200
        Re: Prevent Drop-downs from showing "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2014-11-07 21:43 +0100
          Re: Prevent Drop-downs from showing Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-11-08 01:56 +0100
    Re: Prevent Drop-downs from showing Denis McMahon <denismfmcmahon@gmail.com> - 2014-11-08 14:08 +0000
      Re: Prevent Drop-downs from showing Tim Streater <timstreater@greenbee.net> - 2014-11-08 18:08 +0000
        Re: Prevent Drop-downs from showing "Christoph M. Becker" <cmbecker69@arcor.de> - 2014-11-08 19:47 +0100
          Re: Prevent Drop-downs from showing Denis McMahon <denismfmcmahon@gmail.com> - 2014-11-08 21:20 +0000

#26089 — Prevent Drop-downs from showing

I'm trying to modify a web page that uses hard-coded values in XML for countries and states.  However, we are getting errors because users might select a country from the country drop-down list, say, Australia, but also choose a U.S. state.  Our main student information system, PeopleSoft, chokes on invalid combinations like that, even though the web page does not.  

   I'm no expert at JavaScript, and I would like a little guidance on how to check the country drop-down value as soon as it is selected.  If it is "Untied States" or "Canada," the user is allowed to pick a state. If it is any other country, which is unlikely,  I want to blank out any state value and prevent the state dropdown form appearing or if it is already visible, hide it. I know how to respond to the "Submit button," but this is more complex.  

The drop-down for countries and states occur four times on one page: current address, mailing address, birth country address, and employment address. 

Thanks for any suggestions.  

[toc] | [next] | [standalone]

#26091

DrKen <javajedi2@yahoo.com> wrote on 07 nov 2014 in comp.lang.javascript:

> I'm trying to modify a web page that uses hard-coded values in XML for
> countries and states.  However, we are getting errors because users
> might select a country from the country drop-down list, say, Australia,
> but also choose a U.S. state.  Our main student information system,
> PeopleSoft, chokes on invalid combinations like that, even though the
> web page does not.  

Methinks using clientside to hide serverside coding errors is the wrong 
approach.

>    I'm no expert at JavaScript, and I would like a little guidance on
>    how to check the country drop-down value as soon as it is selected.

use <select onchange='..'

[This part is just html]
 
>    If it is "Untied States" or "Canada," the user is allowed to pick a
>    state. If it is any other country, which is unlikely,  I want to
>    blank out any state value and prevent the state dropdown form
>    appearing or if it is already visible, hide it. I know how to respond
>    to the "Submit button," but this is more complex.  

It seems you know very little of scripting, 
perhaps it would be better to hire a professional,
or first learn more?

To have an unexpected question pop up seems not nice to the user,
better change from readonly to readwrite.

Even so serverside should be able to detect errors,
and act accordingly.
 
> The drop-down for countries and states occur four times on one page:
> current address, mailing address, birth country address, and employment
> address. 

Do you really have 4 dropdowns with 195+ choices?
And also 4 dropdowns with 51 + 13 ?

I would think many users will drop out to prevent dropping down themselves.


-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

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

#26092

Evertjan. wrote:

> DrKen <javajedi2@yahoo.com> wrote on 07 nov 2014 in comp.lang.javascript:
>>    I'm no expert at JavaScript, and I would like a little guidance on
>>    how to check the country drop-down value as soon as it is selected.
> 
> use <select onchange='..'
> 
> [This part is just html]

The “click” event and the “input” event (DOM 3 Events, HTML5) also need to 
be handled because the “change” event may not fire before the element loses 
focus.  This is one of the cases where defining event listeners dynamically 
is warranted, to avoid code duplication.

<http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-htmlevents>
<http://www.w3.org/TR/DOM-Level-3-Events/#event-type-click>
<http://www.w3.org/TR/DOM-Level-3-Events/#event-type-input>
<http://www.w3.org/TR/2014/REC-html5-20141028/forms.html#common-input-element-events>

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

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

#26095

On 07-11-2014 05:52, Evertjan. wrote:
> DrKen <javajedi2@yahoo.com> wrote on 07 nov 2014 in comp.lang.javascript:
> 
>> I'm trying to modify a web page that uses hard-coded values in XML for
>> countries and states.  However, we are getting errors because users
>> might select a country from the country drop-down list, say, Australia,
>> but also choose a U.S. state.  Our main student information system,
>> PeopleSoft, chokes on invalid combinations like that, even though the
>> web page does not.  
> 
> Methinks using clientside to hide serverside coding errors is the wrong 
> approach.

The OP didn't mention any "serverside coding errors". I understood the
web application is using XML files (or XML data) to populate the
drop-down menus, but it could be using JSON instead. So he might write
some client-side JavaScript in order to prevent the odd combinations
between countries and states.

> 
>>    I'm no expert at JavaScript, and I would like a little guidance on
>>    how to check the country drop-down value as soon as it is selected.
> 
> use <select onchange='..'
> 
> [This part is just html]
>  
>>    If it is "Untied States" or "Canada," the user is allowed to pick a
>>    state. If it is any other country, which is unlikely,  I want to
>>    blank out any state value and prevent the state dropdown form
>>    appearing or if it is already visible, hide it. I know how to respond
>>    to the "Submit button," but this is more complex.  
> 
> It seems you know very little of scripting, 
> perhaps it would be better to hire a professional,
> or first learn more?

I hate terms like "professional", "engineer" that don't tell nothing
nowadays. For instance, see John Resig who created jQuery and wrote a
book called "Pro JavaScript Techniques", oh boy! Not happy with that
title, he wrote the "Secrets of the JavaScript Ninja" six years later...
If you use Resig's Pro techniques you'll become a real NINJA (no income,
no job, no asset).

> 
> To have an unexpected question pop up seems not nice to the user,
> better change from readonly to readwrite.
> 
> Even so serverside should be able to detect errors,
> and act accordingly.
>  
>> The drop-down for countries and states occur four times on one page:
>> current address, mailing address, birth country address, and employment
>> address.

Simply build the options for the States select (drop-down menu) based on
the Country's choice. After changing the country (onchange event
handler), the code empties the States dropdown and populates it again
with the corresponding options.

-- 
Joao Rodrigues

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

#26097

Joao Rodrigues <groups_jr-1@yahoo.com.br> wrote on 07 nov 2014 in 
comp.lang.javascript:

> On 07-11-2014 05:52, Evertjan. wrote:
>> DrKen <javajedi2@yahoo.com> wrote on 07 nov 2014 in comp.lang.javascript:
>> 
>>> I'm trying to modify a web page that uses hard-coded values in XML for
>>> countries and states.  However, we are getting errors because users
>>> might select a country from the country drop-down list, say, Australia,
>>> but also choose a U.S. state.  Our main student information system,
>>> PeopleSoft, chokes on invalid combinations like that, even though the
>>> web page does not.  
>> 
>> Methinks using clientside to hide serverside coding errors is the wrong 
>> approach.
> 
> The OP didn't mention any "serverside coding errors".

False!

"Our main student information system, PeopleSoft, chokes on invalid 
combinations like that,"

So the serverside is not programmed correctly, as it should be able to 
respond to "invalid" input from in a conssistent way and not "choke"

> I understood the
> web application is using XML files (or XML data) to populate the
> drop-down menus, but it could be using JSON instead. So he might write
> some client-side JavaScript in order to prevent the odd combinations
> between countries and states.

He might, but it is silly to need to have inconsistencies of the serveride 
cloaced by clientside code.

>>>    I'm no expert at JavaScript, and I would like a little guidance on
>>>    how to check the country drop-down value as soon as it is selected.
>> 
>> use <select onchange='..'
>> 
>> [This part is just html]
>>  
>>>    If it is "Untied States" or "Canada," the user is allowed to pick a
>>>    state. If it is any other country, which is unlikely,  I want to
>>>    blank out any state value and prevent the state dropdown form
>>>    appearing or if it is already visible, hide it. I know how to respond
>>>    to the "Submit button," but this is more complex.  
>> 
>> It seems you know very little of scripting, 
>> perhaps it would be better to hire a professional,
>> or first learn more?
> 
> I hate terms like "professional", "engineer" that don't tell nothing
> nowadays. 

Don't expect to get a free ride without doing yur own best,
I s what I mean. 

> For instance, see John Resig who created jQuery and wrote a
> book called "Pro JavaScript Techniques", oh boy! Not happy with that
> title, he wrote the "Secrets of the JavaScript Ninja" six years later...
> If you use Resig's Pro techniques you'll become a real NINJA (no income,
> no job, no asset).

Using jQuery as a positive example, that is laughable.


-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

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

#26098

Evertjan. wrote:

> Joao Rodrigues […] wrote […]:
>> I hate terms like "professional", "engineer" that don't tell nothing
>> nowadays.
> 
> Don't expect to get a free ride without doing yur own best,
                                                ^^^
> I s what I mean.
  ^^^
You have a writing problem.
 
>> For instance, see John Resig who created jQuery and wrote a
>> book called "Pro JavaScript Techniques", oh boy! Not happy with that
>> title, he wrote the "Secrets of the JavaScript Ninja" six years later...
>> If you use Resig's Pro techniques you'll become a real NINJA (no income,
                                                                 ^^^^^^^^^^
>> no job, no asset).
   ^^^^^^^^^^^^^^^^ 
> Using jQuery as a positive example, that is laughable.
                    ^^^^^^^^^^^^^^^^
You do have a reading problem, too; no doubt about it.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

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

#26099

On Thu, 06 Nov 2014 19:34:51 -0800, DrKen wrote:

> I'm trying to modify a web page that uses hard-coded values in XML for
> countries and states.  However, we are getting errors because users
> might select a country from the country drop-down list, say, Australia,
> but also choose a U.S. state.  Our main student information system,
> PeopleSoft, chokes on invalid combinations like that, even though the
> web page does not.

That's a failing of the main system, or the code that sits between the 
web pages and the main system.

I thing the code behind the web pages should be detecting invalid 
combinations and bouncing them back to the user to correct, rather than 
submitting the invalid data to peoplesoft.

Unless peoplesoft is the code behind the web pages rather than a 
downstream database - in which case peoplesoft should either not be 
generating web pages that allow invalid combinations, or it should be 
handling them.

>    I'm no expert at JavaScript, and I would like a little guidance on
>    how to check the country drop-down value as soon as it is selected. 
>    If it is "Untied States" or "Canada," the user is allowed to pick a
>    state. If it is any other country, which is unlikely,  I want to
>    blank out any state value and prevent the state dropdown form
>    appearing or if it is already visible, hide it. I know how to respond
>    to the "Submit button," but this is more complex.

> The drop-down for countries and states occur four times on one page:
> current address, mailing address, birth country address, and employment
> address.

The simple solution would be to tap into the onchange events of the 
dropdowns concerned and do any needed validation there.

When a US state or Canadian province is selected in a state dropdown, use 
the onchange handler to set the relevant country in the associated 
country pulldown. If the state is set to none, set the country to none.

When the country is changed, just set the state to none. If you're 
changing from USA to not-USA you want the state to become none, the same 
applies if changing from Canada to not-Canada, this is also true even 
when changing from Canada to USA and vice versa.

If you're changing to Canada or to the USA regardless of what you're 
changing the country from, there was no valid state value associated with 
the previous country that is valid for the new country, so again just 
reset to none.

So you need:

onchange handlers for each state field that set the associated country to 
one of Canada, USA, None depending on the state selection when the state 
is changed;

onchange handlers for each country field that set the associated state 
field to none when the country field is changed.

Fortunately you can use the same data to determine valid state / country 
combinations for all 4 pairs of fields.

The bulk of the code is going to be identical for all 4 pairs of 
dropdowns, but you need to tell the javascript which pair of dropdowns it 
needs to operate on.

onchange="stateChanged(this);"
onchange="countryChanged(this);"

Now assuming that you have a consistent way to get from each dropdown to 
the associated dropdown, you can use dom navigation to find the relevant 
country / state dropdown for the state / country dropdown that was 
selected.

This might involve finding a parent element that contained exactly two 
dropdowns, and knowing that this is the country / state one, then the 
other must be the state / country one, or knowing that the state and  
country dropdowns are in adjacent table rows, so you need to look in the 
previous / next table row element to find the associated dropdown.

It might even involve finding all the dropdowns in the document and 
looking for one with a related name, or it might involve some 
relationship between the names of ids of each pair of related dropdowns. 
You have a lot of choices.

assuming you have the following select ids:

curr_state, curr_country
mail_state, mail_country
born_state, born_country
work_state, work_country

and that the value of the select option for "None" is "0", country usa is 
"163" and country canada is "17" in all the state and country option 
lists then you could do something like:

/* State and province names must match exactly spelling and case of names 
in option lists */
var us_states = [ /* list of usa state names */ ];
var ca_provs = [ /* list of canada province names */ ];

function gebi(id) { return document.getElementById(id); }

function get_related_el(el) {
  bits = el.id.split("_");
  if (bit[1] == "country")
    return gebi(bit[0]+"_state");
  return gebi(bit[0]+"_country");
}

function state_changed(el) {
  var state_province = el.selectedOptions.item(0).text;
  if (us_states.indexOf(state_province) != -1)
    get_related_el(el).value = "163";
  else if (ca_provs.indexOf(state_province) != -1)
    get_related_el(el).value = "17";
  else
    get_related_el(el).value = "0";
}

function country_changed(el) {
  get_related_el(el).value = "0";
}

Note - above code is untested and may not be the most efficient solution 
even if it works. When Thomas "pointy eared" Lahn undoubtedly criticises 
the above code, ask him to give you his alternative solution instead.

-- 
Denis McMahon, denismfmcmahon@gmail.com

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

#26100

In article <m3l85i$jji$1@dont-email.me>, Denis McMahon
<denismfmcmahon@gmail.com> wrote:

> I thing the code behind the web pages should be detecting invalid 
> combinations and bouncing them back to the user to correct, rather than 
> submitting the invalid data to peoplesoft.

Invalid combinations should not even be possible. Your first dropdown
should list countries. Having selected a country, you load the second
dropdown with state/province/county as appropriate. This could all be
hardwired into the app, or, better, make an ajax call to obtain th
edata you need to load the second dropdown with, including whether it's
to be loaded with states,counties, or provinces.

-- 
"That which can be asserted without evidence, can be dismissed without 
evidence."
-- Christopher Hitchens

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

#26102

Tim Streater wrote:

> In article <m3l85i$jji$1@dont-email.me>, Denis McMahon
> <denismfmcmahon@gmail.com> wrote:
> 
>> I thing the code behind the web pages should be detecting invalid
>> combinations and bouncing them back to the user to correct, rather
>> than submitting the invalid data to peoplesoft.
> 
> Invalid combinations should not even be possible. Your first dropdown
> should list countries. Having selected a country, you load the second
> dropdown with state/province/county as appropriate. This could all be
> hardwired into the app, or, better, make an ajax call to obtain th
> edata you need to load the second dropdown with, including whether it's
> to be loaded with states,counties, or provinces.

However, you can't have reliable validation on the client, so it's
always necessary to validate on the server.

-- 
Christoph M. Becker

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

#26103

On Sat, 08 Nov 2014 19:47:12 +0100, Christoph M. Becker wrote:

> However, you can't have reliable validation on the client, so it's
> always necessary to validate on the server.

+1

-- 
Denis McMahon, denismfmcmahon@gmail.com

[toc] | [prev] | [standalone]

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

csiph-web