Double combox year range problem

JavaScript
1

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.


    <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

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. :rolleyes:

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


<!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

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.

4

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/1917576/how-to-pass-javascript-variables-to-php

5

Indeed.
Either submit the values with a form as AllanP says, or use AJAX to do the same thing on the fly.