Results 1 to 7 of 7

Thread: Javascript help

  1. #1
    Web Extraordinaire
    Join Date
    Aug 2004
    Posts
    301
    Thanks
    0
    Thanked
    0 times in 0 posts

    Javascript help

    Hi Guys,

    Right i have a little problem with some javascript, what i am doing is a select box with postcodes in. When you select a postcode and press submit a table appears with the prices. which is fine and works, but what i need it to do is only display the an extra 4th column if the post code is TF.

    So below is what i have done but does not work and cannot see why.

    Code:
     <script language="javascript" type="text/javascript">
       function FuncShowHide(){
          
          if (document.getElementById('hideShow').style.display == document.getElementById('trX').style.display){
             document.getElementById('hideShow').style.display = "none";
    		 }
    	
    	else if (document.getpostcode.postcode == "TF" ){
             alert ("test");
    		 document.getElementById('col4').style.display = "block";
    		 
          } else {
             document.getElementById('hideShow').style.display = document.getElementById('trX').style.display;
    		 document.getElementById('col4').style.display = "none";
          }
       }
       
    
    </script>
    					  <table width="100%" border="0" cellspacing="0" cellpadding="5">
                            <tr>
                              <td colspan="2">
    						  
    						<form name="getpostcode">
    						  <table width="100%" border="0" cellspacing="0" cellpadding="3">
                                <tr>
                                  <td width="62%"><strong>Please select your postcode from the drop down box:</strong></td>
                                  <td width="38%"><select name="postcode">
                                      <option>Please Select</option>
                                      <option>AB</option>
                                      <option>AL</option>
                                      <option>B</option>
                                      <option>BA</option>
                                      <option>BB</option>
                                      <option>BD</option>
                                      <option>BH</option>
                                      <option>BL</option>
                                      <option>BN</option>
                                      <option>BR</option>
                                      <option>BS</option>
                                      <option>BT</option>
                                      <option>CA</option>
                                      <option>CB</option>
                                      <option>CF</option>
                                      <option>CH</option>
                                      <option>CM</option>
                                      <option>CO</option>
                                      <option>CR</option>
                                      <option>CT</option>
                                      <option>CV</option>
                                      <option>CW</option>
                                      <option>DA</option>
                                      <option>DD</option>
                                      <option>DE</option>
                                      <option>DG</option>
                                      <option>DH</option>
                                      <option>DL</option>
                                      <option>DN</option>
                                      <option>DT</option>
                                      <option>DY</option>
                                      <option>E</option>
                                      <option>EC</option>
                                      <option>EH</option>
                                      <option>EN</option>
                                      <option>EX</option>
                                      <option>FK</option>
                                      <option>FY</option>
                                      <option>G</option>
                                      <option>GL</option>
                                      <option>GU</option>
                                      <option>GY</option>
                                      <option>GA</option>
                                      <option>GD</option>
                                      <option>HG</option>
                                      <option>HP</option>
                                      <option>HR</option>
                                      <option>HS</option>
                                      <option>HU</option>
                                      <option>HX</option>
                                      <option>IG</option>
                                      <option>IM</option>
                                      <option>IP</option>
                                      <option>IV</option>
                                      <option>JE</option>
                                      <option>KA</option>
                                      <option>KT</option>
                                      <option>KW</option>
                                      <option>KY</option>
                                      <option>L</option>
                                      <option>LA</option>
                                      <option>LD</option>
                                      <option>LE</option>
                                      <option>LL</option>
                                      <option>LN</option>
                                      <option>LS</option>
                                      <option>KLU</option>
                                      <option>M</option>
                                      <option>MW</option>
                                      <option>MK</option>
                                      <option>ML</option>
                                      <option>N</option>
                                      <option>NE</option>
                                      <option>NG</option>
                                      <option>NN</option>
                                      <option>NP</option>
                                      <option>NR</option>
                                      <option>NW</option>
                                      <option>OL</option>
                                      <option>OX</option>
                                      <option>PA</option>
                                      <option>PE</option>
                                      <option>PH</option>
                                      <option>PL</option>
                                      <option>PO</option>
                                      <option>PR</option>
                                      <option>RG</option>
                                      <option>RH</option>
                                      <option>RM</option>
                                      <option>S</option>
                                      <option>SA</option>
                                      <option>SE</option>
                                      <option>SG</option>
                                      <option>SK</option>
                                      <option>SL</option>
                                      <option>SM</option>
                                      <option>SN</option>
                                      <option>SO</option>
                                      <option>SP</option>
                                      <option>SR</option>
                                      <option>SS</option>
                                      <option>ST</option>
                                      <option>SW</option>
                                      <option>SY</option>
                                      <option>TA</option>
                                      <option>TD</option>
                                      <option value="TF">TF</option>
                                      <option>TN</option>
                                      <option>TO</option>
                                      <option>TR</option>
                                      <option>TS</option>
                                      <option>TW</option>
                                      <option>UB</option>
                                      <option>W</option>
                                      <option>WA</option>
                                      <option>WC</option>
                                      <option>WD</option>
                                      <option>WF</option>
                                      <option>WN</option>
                                      <option>WR</option>
                                      <option>WS</option>
                                      <option>WV</option>
                                      <option>YO</option>
                                      <option>ZE</option>
                                    </select>                              </td>
                                </tr>
                                <tr>
                                  <td></td>
                                  <td id="trX" onClick="FuncShowHide()"><input type="button" value="submit"></td>
                                </tr>
    
                              </table>
    					</form>
    Any ideas anyone?

    Cheers
    RealM

  2. #2
    Registered+
    Join Date
    Jul 2006
    Posts
    46
    Thanks
    0
    Thanked
    0 times in 0 posts
    I'm sure I can help but could you post an example of the full page, with the table you want to display?

  3. #3
    IBM
    IBM is offline
    there but for the grace of God, go I IBM's Avatar
    Join Date
    Dec 2003
    Location
    West London
    Posts
    4,187
    Thanks
    149
    Thanked
    244 times in 145 posts
    • IBM's system
      • Motherboard:
      • Asus P5K Deluxe
      • CPU:
      • Intel E6600 Core2Duo 2.40GHz
      • Memory:
      • 2x2GB kit (1GBx2), Ballistix 240-pin DIMM, DDR2 PC2-6400
      • Storage:
      • 150G WD SATA 10k RAPTOR, 500GB WD SATA Enterprise
      • Graphics card(s):
      • Leadtek NVIDIA GeForce PX8800GTS 640MB
      • PSU:
      • CORSAIR HX 620W MODULAR PSU
      • Case:
      • Antec P182 Black Case
      • Monitor(s):
      • Dell 2407WPF A04
      • Internet:
      • domestic zoom
    Can the 'postcode' element reference within the FuncShowHide function refer explicitly to the display value of the postcode drop down, or do you have to set the value of each element? E.g. <option value=AB>AB</option><option value=AL>AL</option>....
    sig removed by Zak33

  4. #4
    HEXUS.net Webmaster
    Join Date
    Jul 2003
    Location
    UK
    Posts
    3,108
    Thanks
    1
    Thanked
    0 times in 0 posts
    I think you'll need to change

    Code:
    document.getpostcode.postcode == "TF"
    to

    Code:
    document.forms['getpostcode'].postcode.selectedIndex.value == 'TF'

  5. #5
    Registered+
    Join Date
    Jul 2006
    Posts
    46
    Thanks
    0
    Thanked
    0 times in 0 posts
    The problem would be - if I understand the problem correctly - is that if the table that is shown with prices has multiple rows then the 4th column header of the table and then the 4th cell of each 'data' row would need to be hidden or shown as I'm not sure you can hide/show an entire column in one go. This could be done with different id's for the 4th cell of each row, or transversing the table using the DOM in JavaScript. As I said, it would be helpful to see the code.

    Oh, and Iain is on the right track but you should change

    Code:
    document.getpostcode.postcode
    to:

    Code:
    document.getpostcode.postcode.options[document.getpostcode.postcode.selectedIndex].value
    Last edited by cubabit; 09-11-2006 at 06:13 PM.

  6. #6
    Registered+
    Join Date
    Jul 2006
    Posts
    46
    Thanks
    0
    Thanked
    0 times in 0 posts
    Oh, and one more thing:

    Code:
    document.getElementById('col4').style.display = "block"
    should be:

    Code:
    document.getElementById('col4').style.display = ""
    If you set the display type of an element to an empty string then its default type is used. The default type for a cell would be 'table-cell' - not 'block'. If you set it to 'block' explicitly you will get strange results in more standards compatible browsers than IE!

  7. #7
    HEXUS.net Webmaster
    Join Date
    Jul 2003
    Location
    UK
    Posts
    3,108
    Thanks
    1
    Thanked
    0 times in 0 posts
    cubabit has a valid point about not being able to hide an entire table column or row based on a ID. What you'd need to do is give every cell in column 4 a specific class and then run a quick for loop to grab all elements on the page with that class and set the display style to table-cell, block or visible. That will enable you to show or hide the entire column

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Similar Threads

  1. Replies: 2
    Last Post: 06-11-2006, 12:05 PM
  2. JavaScript Help
    By Areku in forum Software
    Replies: 5
    Last Post: 25-05-2006, 03:27 PM
  3. Mixing Javascript with ASP in Overlib..
    By Stoo in forum Software
    Replies: 2
    Last Post: 13-09-2005, 07:21 AM
  4. javascript not displaying in firefox
    By ZigZag in forum Software
    Replies: 3
    Last Post: 11-09-2005, 12:05 PM
  5. Javascript problem
    By Korky in forum PC Hardware and Components
    Replies: 0
    Last Post: 03-04-2004, 12:58 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •