Wrox Home  
Search P2P Archive for: Go

  Return to Index  

javascript thread: Detecting Ticked CheckBox


Message #1 by "Ray Murphy" <raymurphy@g...> on Tue, 28 Aug 2001 22:39:13
I've now came up with a solution which does what I was after, although it 
may not be most elegant solution.

The solution wasn't as hard to come up with as I first thought, and what 
I've done is used the onclick event for the checkbox - so, to call the 
ProcessCity.asp page as soon the user has ticked the checkbox, the 
following code is OK : 

<INPUT id=checkboxnewcastle type=checkbox name=checkboxnewcastle 
onclick="window.location.href('ProcessCity.asp?
city=NEWC&cityname=Newcastle-upon-Tyne')">Process All Cities In Region

Passing down the city code and name is a bit of a botch-job, as I couldn't 
quickly figure out how the ProcessCity.asp could detect which checkbox had 
actually been ticked (not that the checkboxes are held in a DIV and aren't 
specifically held in a FORM) - still, the solution works OK for now, 
although I'd really like to sort out identifying which checkbox was ticked.


Ray

> Hi, 
> 
> Whenever I hit a problem, I always have trouble giving a short and snappy
> summary of the problem, so apologies for this lengthy post ....
> 
> Using an image map and some DIVS, I am rendering a floating panel beside 
> the map which contains a list of cities in a particular area - so if the 
> user clicks on Newcastle on the map, they'll see Newcastle-upon-Tyne and 
> Sunderland in the panel. If the user clicks on a city name in the panel, 
I 
> then pass down that city to another asp page (ProcessCity.asp) where 
> processing specific to that city takes place. 
> 
> This all works fine, and the following code snippet illustrates roughly 
> what I'm doing :
> 
> <----- FIRST CODE SNIPPET BEGINS ----->
> <!-- RegionList1 will be used to show Cities local to NEWCASTLE -->
> <!-- Build up an HTML Table to hold the hardcoded list of Cities in this 
> Region -->
> <div id=RegionList1 name=RegionList1 
> style=position:absolute;width:215px;top:0;left:0;z-
> index:1;visibility:hidden;>
> <table name=RegionTable1 id=RegionTable1 width=100% cellspacing=0 
> cellpadding=0 border=1 bordercolor=#0101B7 bgcolor=#FCF5A2>
> 
> <tr>
> <td><span style=height:100%;background-
color:#FCF5A2;width:100%;>Newcastle 
> Region</span></td>
> </tr>
> 
> <tr>
> <td>
> <a href='ProcessCity.asp?city=NEWC&name=Newcastle-upon-Tyne' 
> onMouseOver=onCity(1); onMouseOut=outCity(1);>
> <span id=cityRow1 name=cityRow1 style=height:100%;width:100%;>Newcastle 
> upon Tyne</span>
> </a>
> </td>
> </tr>
> 
> <tr>
> <td>
> <a href='ProcessCity.asp?city=SUN&name=Sunderland' onMouseOver=onCity
(2); 
> onMouseOut=outCity(2);>
> <span id=cityRow2 name=cityRow2>Sunderland</span>
> </a></td>
> </tr>
> 
> 
> </table>
> </div>
> 
> <!-- RegionList2 will be used to show Cities local to LIVERPOOL -->
> <!-- Build up an HTML Table to hold the hardcoded list of Cities in this 
> Region -->
> <div id=RegionList2 name=RegionList2 
> style=position:absolute;width:215px;top:0;left:0;z-
> index:1;visibility:hidden;>
> <table name=RegionTable2 id=RegionTable2 width=100% cellspacing=0 
> cellpadding=0 border=1 bordercolor=#0101B7 bgcolor=#FCF5A2>
> 
> <tr>
> <td><span style=height:100%;background-
color:#FCF5A2;width:100%;>Liverpool 
> Region</span></td>
> </tr>
> 
> <tr>
> <td>
> <a href='ProcessCity.asp?city=BIRK&name=Birkenhead' onMouseOver=onCity
(3); 
> onMouseOut=outCity(3);>
> <span id=cityRow3 name=cityRow3 
> style=height:100%;width:100%;>Birkenhead</span>
> </a>
> </td>
> </tr>
> 
> <tr>
> <td>
> <a href='ProcessCity.asp?city=LIV&name=Liverpool' onMouseOver=onCity(4); 
> onMouseOut=outCity(4);>
> <span id=cityRow4 name=cityRow4>Liverpool</span>
> </a></td>
> </tr>
> 
> 
> </table>
> </div>
> <----- FIRST CODE SNIPPET ENDS ----->
> 
> As I say, this all works fine - but, as ever, a change to this has been 
> requested so that the user has the facility to be able process ALL 
cities 
> in a particular region ....
> 
> So I thought about adding a checkbox for 'Process All Cities in Region', 
> as in this revised code snippet :
> 
> <----- SECOND CODE SNIPPET BEGINS ----->
> <!-- RegionList1 will be used to show Cities local to NEWCASTLE -->
> <!-- Build up an HTML Table to hold the hardcoded list of Cities in this 
> Region -->
> <div id=RegionList1 name=RegionList1 
> style=position:absolute;width:215px;top:0;left:0;z-
> index:1;visibility:hidden;>
> <table name=RegionTable1 id=RegionTable1 width=100% cellspacing=0 
> cellpadding=0 border=1 bordercolor=#0101B7 bgcolor=#FCF5A2>
> 
> <tr>
> <td><span style=height:100%;background-
color:#FCF5A2;width:100%;>Newcastle 
> Region</span></td>
> </tr>
> 
> <tr>
> <td>
> <span style=height:100%;background-color:#FCF5A2;width:100%;> 
> <INPUT id=checkboxnewcastle type=checkbox name=checkboxnewcastle>Process 
> All Cities In Region
> </span>
> </td>
> </tr>
> 
> <tr>
> <td>
> <a href='ProcessCity.asp?city=NEWC&name=Newcastle-upon-Tyne' 
> onMouseOver=onCity(1); onMouseOut=outCity(1);>
> <span id=cityRow1 name=cityRow1 style=height:100%;width:100%;>Newcastle 
> upon Tyne</span>
> </a>
> </td>
> </tr>
> 
> <tr>
> <td>
> <a href='ProcessCity.asp?city=SUN&name=Sunderland' onMouseOver=onCity
(2); 
> onMouseOut=outCity(2);>
> <span id=cityRow2 name=cityRow2>Sunderland</span>
> </a></td>
> </tr>
> 
> </table>
> </div>
> 
> <!-- RegionList2 will be used to show Cities local to LIVERPOOL -->
> <!-- Build up an HTML Table to hold the hardcoded list of Cities in this 
> Region -->
> <div id=RegionList2 name=RegionList2 
> style=position:absolute;width:215px;top:0;left:0;z-
> index:1;visibility:hidden;>
> <table name=RegionTable2 id=RegionTable2 width=100% cellspacing=0 
> cellpadding=0 border=1 bordercolor=#0101B7 bgcolor=#FCF5A2>
> 
> <tr>
> <td><span style=height:100%;background-
color:#FCF5A2;width:100%;>Liverpool 
> Region</span></td>
> </tr>
> 
> <tr>
> <td>
> <span style=height:100%;background-color:#FCF5A2;width:100%;> 
> <INPUT id=checkboxliverpool type=checkbox name=checkboxliverpool>Process 
> All Cities In Region
> </span>
> </td>
> </tr>
> 
> 
> <tr>
> <td>
> <a href='ProcessCity.asp?city=BIRK&name=Birkenhead' onMouseOver=onCity
(3); 
> onMouseOut=outCity(3);>
> <span id=cityRow3 name=cityRow3 
> style=height:100%;width:100%;>Birkenhead</span>
> </a>
> </td>
> </tr>
> 
> <tr>
> <td>
> <a href='ProcessCity.asp?city=LIV&name=Liverpool' onMouseOver=onCity(4); 
> onMouseOut=outCity(4);>
> <span id=cityRow4 name=cityRow4>Liverpool</span>
> </a></td>
> </tr>
> 
> 
> </table>
> </div>
> 
> <----- SECOND CODE SNIPPET ENDS ----->
> 
> What I now need is a way of calling the ProcessCity.asp page as soon the 
> user has ticked the checkbox, and then (in that page) being able to 
detect 
> which checkbox (eg checkboxnewcastle or checkboxliverpool in the above 
> example) has been ticked. 
> 
> Any ideas, anyone ?
> 
> Thanks.
> 
> 
> Ray
> 

  Return to Index