[Mapserver-users] Re: select mapsize from combo box

Mon Feb 10 05:48:43 PST 2003

--=======553A5161=======
Content-Type: text/plain; x-avg-checked=avg-ok-45B628A9; charset=us-ascii; format=flowed
Content-Transfer-Encoding: 8bit

At 09:05 PM 2/10/2003 +0800, you wrote:

>Hi Richard,
>
>The reason I'm contacting you is due to the fact that you have a combo box
>on your site where the user can select to change the map size. I too am
>trying to implement that. It looks easy but I've got a problem I was
>wonfering if you could help me with (I'v also posted this to the user
>group).
>
>I am trying to duplicate the change in mapsize as seen in the GMap sample of
>the map of Canada.
>Here's what I've got so far -
>
><SELECT name=MapSize onchange=MapSizeSelected()>
><OPTION value="550 500">550 x 500</OPTION>
><OPTION value="600 500">600 x 500</OPTION>
></SELECT>
>
>and
>
><SCRIPT LANGUAGE="JavaScript">
>function MapSizeSelected(){
>     var aForm = document.forms[0]
>     if (document.forms[0].MapSize.selectedIndex != 0 &&
>         document.forms[0].MapSize.selectedIndex !=1){
>         aForm.zoomdir.value = "0";
>         aForm.submit()
>     }
>}
></script>
>
>My problem is that when the form gets submitted, even on this first time,
>the combo box does not select the actual mapsize value. Therefore, on the
>first sumbit the size (from the map file - 500 400) does not get selected.
>When the user slects another value, say 600 500, the mapsize does change but
>the 600 500 value does not get selected after the submit.
>
>I've spent all day on this and cannot figure it out. Hope you can assist.
>
>Thanks,
>
>Steve

There is no mechanism in HTML to automatically set a form control to an 
arbitrary value. So each time the page is sent to the browser it has the 
default values for the controls you have to use some JavaScript to set the 
control after the page has loaded. A simple example looks like this:

// this function gets call when the page has loaded
// widths 440 and 670 are based on my options (see below)
function init() {
     if ([mapwidth]==440) i=0;
     else if([mapwidth]==670) i=1;
     else i=2;
     document.form1.map_size.options[i].selected=true;
}

<!-- onLoad calls init() -->
<BODY onLoad="init();">

<SELECT name="map_size" onChange="reSize();" class="txt11px">
     <OPTION value="440 330">Small</OPTION>
     <OPTION value="670 503">Medium</OPTION>
     <OPTION value="900 675">Large</OPTION>
</SELECT>

This is as simple as it gets. There are more sophisticated examples out 
there. Search around and steal the code from pages you like. Remember you 
can always view the javascript contained in a page.

Rich

Richard W. Greenwood, PLS
(307) 733-0203
Rich at GreenwoodMap.com
www.GreenwoodMap.com 

--=======553A5161=======--