SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2008
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Double combox year range problem.

    Hello:

    I have a problem that I have searched the internet for without success and I could now use help with. I am trying to get 2 combo boxes that lists the years from say ...1925 to 2014. The first combo box would be the FROM box range and the second box the TO box range, these values will later be used in a search query. How do I limit the years in the TO combo box to display greater than or equal to the FROM combo box value (year). It seems and looks stupid to list previous years in the TO box based on what is selected in the FROM. I am thinking this is a javascript thing based on the examples I have seen. So if some selects 1927 in the FROM field, the TO field would start at 1927 onward thru to 2014.


    HTML Code:
        <select class="drange" name="form_from"> 
           <option value="" selected="selected"></option>
           <option value="1925" >1925</option>
           <option value="1926" >1926</option>
           <option value="1927" >1927</option>
           <option value="1928" >1928</option>
           <option value="1929" >1929</option>
           <option value="1930" >1930</option>
        </select>&nbsp;&nbsp;&nbsp; TO:&nbsp;
        <select class="drange" name="form_to"> 
           <option value="" selected="selected"></option>
           <option value="1925" >1925</option>
           <option value="1926" >1926</option>
           <option value="1927" >1927</option>
           <option value="1928" >1928</option>
           <option value="1929" >1929</option>
           <option value="1930" >1930</option>
        </select>

  2. #2
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I am thinking this is a javascript thing based on the examples I have seen. So if some selects 1927 in the FROM field, the TO field would start at 1927 onward thru to 2014.
    Here is a script that sets the beginning ot the "To" one greater than the selected "From" option. I have used node manipulation to do this job because I had problems with building a string using innerHTML in IE. It worked fine in all other browsers, but not IE.

    I have removed the values you used in the <option> tags. This script makes use of the text between the tags instead.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>double combo date picker</title>
    <script type="text/javascript">
     function getTo(obj)
      { var selectObj, toDate, elem, txtNode;  
        if(obj.selectedIndex==0){return; }
        toDate=1 + parseInt(obj.options[obj.selectedIndex].text);
        elem=document.createElement("option");
        txtNode=document.createTextNode("To");
        elem.appendChild(txtNode);
       // 
        selectObj=document.getElementById("select_to"); 
        selectObj.innerHTML="";
        selectObj.appendChild(elem);
       // 
        for(var i=0;i<6;i++)
          { elem=document.createElement("option");
            txtNode=document.createTextNode(toDate);
            elem.appendChild(txtNode);
            selectObj.appendChild(elem);
            toDate++;
          }
      }
    </script>
    <style type="text/css">
    body   { margin:3px 0px; }
    body, select { font-family:arial, helvetica, sans-serif; font-weight:bold; font-size:13px; color:#000; text-align:left;  }
    select { width:70px; }
    #wrap  { width:500px; height:500px; margin-left:20px;  }
    </style>
    </head>
    
    <body>
    
    <div id="wrap">
        <select name="select_from" onchange="getTo(this)">
        <option>From</option>
        <option>1925</option>
        <option>1926</option>
        <option>1927</option>
        <option>1928</option>
        <option>1929</option>
        <option>1930</option>
        </select> &nbsp;&nbsp;&nbsp; TO:&nbsp;
        <select id="select_to" name="select_to">&nbsp;</select>
    </div>
    
    </body>
    
    </html>

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2008
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AllanP View Post
    Here is a script that sets the beginning ot the "To" one greater than the selected "From" option. I have used node manipulation to do this job because I had problems with building a string using innerHTML in IE. It worked fine in all other browsers, but not IE.

    I have removed the values you used in the <option> tags. This script makes use of the text between the tags instead.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>double combo date picker</title>
    <script type="text/javascript">
     function getTo(obj)
      { var selectObj, toDate, elem, txtNode;  
        if(obj.selectedIndex==0){return; }
        toDate=1 + parseInt(obj.options[obj.selectedIndex].text);
        elem=document.createElement("option");
        txtNode=document.createTextNode("To");
        elem.appendChild(txtNode);
       // 
        selectObj=document.getElementById("select_to"); 
        selectObj.innerHTML="";
        selectObj.appendChild(elem);
       // 
        for(var i=0;i<6;i++)
          { elem=document.createElement("option");
            txtNode=document.createTextNode(toDate);
            elem.appendChild(txtNode);
            selectObj.appendChild(elem);
            toDate++;
          }
      }
    </script>
    <style type="text/css">
    body   { margin:3px 0px; }
    body, select { font-family:arial, helvetica, sans-serif; font-weight:bold; font-size:13px; color:#000; text-align:left;  }
    select { width:70px; }
    #wrap  { width:500px; height:500px; margin-left:20px;  }
    </style>
    </head>
    
    <body>
    
    <div id="wrap">
        <select name="select_from" onchange="getTo(this)">
        <option>From</option>
        <option>1925</option>
        <option>1926</option>
        <option>1927</option>
        <option>1928</option>
        <option>1929</option>
        <option>1930</option>
        </select> &nbsp;&nbsp;&nbsp; TO:&nbsp;
        <select id="select_to" name="select_to">&nbsp;</select>
    </div>
    
    </body>
    
    </html>
    That is brilliant. FYI, I tested it on IE11, which I personally hate, and it works great. Now, next question, haha, sorry, but how to I access those variables in php? I mean, it displays great, but how do I get teh from number and to number so that I can apply my php/mysqli searches? Sorry, but I am in the learing process of javascript and find it hard to see the variables that I can apply.
    Last edited by Mittineague; Mar 9, 2014 at 20:46.

  4. #4
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    But how do I get the from-number and the to-number so that I can apply my php/mysqli searches?
    I am not a php programmer but after a little looking around I find that the best way appears to be to put your select and option elements inside a form and then submit the form to the server. This will cause the page to reload. You can read about the various options at the following link
    http://stackoverflow.com/questions/1...riables-to-php

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,996
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by AllanP View Post
    I find that the best way appears to be to put your select and option elements inside a form and then submit the form to the server. This will cause the page to reload.
    Indeed.
    Either submit the values with a form as AllanP says, or use AJAX to do the same thing on the fly.


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
  •