SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2002
    Location
    USA
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question problem with select options

    I built a site ( www.equimusic.com ) that does a simple search of a database based on a form text field and one of the options selected (search feature in header-upper right). I used javascript to select one of the options as a default and then when an option is selected it unchecks the other options so only one option is sent to the search code. It works fo rm on a Mac with Firefox, and a fellow developer tested it out on a PC with Firefox and MSIE and it works for him as well..but here is what the client says:

    I tested the bpm search on my office PC using Firefox alone and also using it and then going to Yahoo and Google. The bpm entry followed by "enter" worked fine in each of those cases. However, when using Firefox alone or using it and then going to equimusic.com via Yahoo or Google, the "Latest Additions" and "Mike's Picks" boxes did not show up!

    ..

    I had three people in my office try the bpm number entry followed by "enter". Two encountered the same problem I described to you. One did not - it worked perfectly. Now that's weird! By the way, if I input 52 and hit "go", then it works. My staff and I all have MSIE and PCs.
    The flash file not showing up is because I don't have in my script to present an alternate when flash is not installed...part of the wrap up on the site.

    But what on earth is he talking about when he mentions "when using Firefox alone or using it and then going to equimusic.com via Yahoo or Google" ?
    u l t i m a t e
    ..........creative | media

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,264
    Mentioned
    196 Post(s)
    Tagged
    2 Thread(s)

    sporadic page rendering

    Quote Originally Posted by Boss Hoss
    But what on earth is he talking about when he mentions "when using Firefox alone or using it and then going to equimusic.com via Yahoo or Google" ?
    I don't know what he means by that, you'll have to ask him. But you have bigger problems than that.
    The thread title is "problem with select options"
    I don't know why you would code for differently named radio buttons, you could give them the same name and get the selected value. I thinlk if you use radio buttons the way they were intended to, you'd have one less problem.
    The fact that the page "works" for certain people is no justification for poor mark-up. Ignoring the fact that the page uses 6 nested tables to structure the layout, it has a style tag in the body instead of the head.
    HTML Code:
    <table>
      <table>
        <table>
          <table>
          </table>
        </table>
      </table>
      <table>
        <p>
    Problem area here with "Latest Additions" and "Mike's Picks" swf object
        </p>
      </table>
    <style>
    </style>
      <table>
        <table>
        </table>
      </table>
    </table>
    I think if you run the page through the w3c validator and fix the errors it should "work" for everyone.

  3. #3
    SitePoint Zealot
    Join Date
    Jul 2002
    Location
    USA
    Posts
    132
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    now I've run through a validator and taken care of the majority of errors
    http://validator.w3.org/check?uri=ht...Fequimusic.com

    re: nested tables

    I'm using php to build my pages but maintaining WYSIWYG design mode. The site template "includes" the different common elements (e.g. header, footer, search) as it renders the html to the browser. If I was building the final page as one page, then I would only have one table element. The reason I make the elements their own tables is so when I edit them in WYSIWYG mode I see the element as it would be inlcuded.

    re: <links> in <body>

    That was because in my header,footer/search I put the <link> at the top while building the page so I could apply the proper CSS to the elements. I'm supposed to remove them once I do my final QC check. I've done now.

    re: javascript/form for search

    Here is the javascript and form I was using ( W3C reminded me to put in type="text/javascript" ). My intent is to make "BPM" the default on entry, and then when any of the radio buttons are selected, to click off the others so I don't have multiple values submitted.

    HTML Code:
    <script language="JavaScript" type="text/javascript">
      <!--  Activate Cloaking Device
      function toggle_default()
      	{
      	document.forms[0].search_bpm.checked=true;
      	document.forms[0].search_title.checked=false;
      	document.forms[0].search_album.checked=false;
      	}
      
      function toggle_bpm()
         {
         document.forms[0].search_title.checked=false;
         document.forms[0].search_album.checked=false;
         }
      function toggle_title()
         {
         document.forms[0].search_bpm.checked=false;
         document.forms[0].search_album.checked=false;
         }
      function toggle_album()
         {
         document.forms[0].search_bpm.checked=false;
         document.forms[0].search_title.checked=false;
         }
       //use this to run defaults on page load
       //http://simon.incutio.com/archive/2004/05/26/addLoadEvent
      function addLoadEvent(func) {
        var oldonload = window.onload;
        if (typeof window.onload != 'function') {
      	window.onload = func;
        } else {
      	window.onload = function() {
      	  oldonload();
      	  func();
      	}
        }
      }
      addLoadEvent(toggle_default);
       
      // Deactivate Cloaking -->
      </script>
      <form action="/view.php" method="post" enctype="multipart/form-data" target="_self">
      <table width="150" border="0" cellspacing="2" cellpadding="0">
        <tr>
      	<td nowrap><input name="search_text" type="text" class="text" size="24" maxlength="24">
      	  <input name="search" type="submit" class="text" value="GO"></td>
        </tr>
        <tr>
      	<td><span class="text">
     <input name="search_bpm" type="radio" class="text" value="1" onClick="toggle_bpm()"> BPM 
     <input name="search_title" type="radio" class="text" value="1" onClick="toggle_title()"> title 
     <input name="search_album" type="radio" class="text" value="1" onClick="toggle_album()"> album
     	 </span></td>
        </tr>
      </table>
      </form>
    the search routine then submits its $_POST data to a database file that then goes and gets the data like
    PHP Code:
    $query_rs_music "SELECT * FROM music WHERE music.music_album LIKE '%".$_GET['album']."%' ORDER BY music.music_bpm ASC, music.music_gait DESC"
    note: there is a conversion from $_POST data to $_GET for continued search linking.

    my code has to do several if/then decisions based on whether I have 3 $_POST variables or one variable with 3 different values.

    so, how would you suggest the javascript/form above be changed?

    oh, and does it fail for anyone now after doing the w3c validation? do users of WinXP SP2 have more difficulties than anyone else?
    u l t i m a t e
    ..........creative | media

  4. #4
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,264
    Mentioned
    196 Post(s)
    Tagged
    2 Thread(s)

    radio buttons

    A WYSIWYG explains the tables. Not much you can do about that I guess as they all (except DW now?) seem to.
    To make a radio button selected by default give it the attribute-value checked="checked". When radio buttons have the same name only one can be checked, that's what radio buttons are. They are not "round checkboxes". Try this and you'll see what I mean.
    HTML Code:
    <html>
    <head>
    <script type="text/javascript">
    var theSelected;
    function getChecked(){
    numElems = document.getElementById('theForm').elements;
      for (var i = 0; i < numElems.length; i++){
        if (numElems[i].checked == true){
          theSelected = numElems[i].value;
        }
      }
    alert(theSelected + ' was selected');
    }
    </script>
    </head>
    <body>
    <form id="theForm">
    <input name="search" type="radio" class="text" value="bpm" checked="checked" > BPM 
    <input name="search" type="radio" class="text" value="title"> title 
    <input name="search" type="radio" class="text" value="album"> album
    <input type="button" value="click" onclick="getChecked();" />
    </form>
    </body>
    </html>
    The PHP variable would be $_POST['search']


Bookmarks

Posting Permissions

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