Value of text field to influence options for a select..

[c_martini]

I have a text field and a select menu in a form. The text field has a javascript calendar attached to it which inputs the correct date format into the text field. I want this field's value to influence what options are available in the select menu. The select menu is has a list of options for number of days to keep a posted request alive 1 to 30 days.

The maximum number of days to select from should not exceed the date input in the date text field. In other words, if I were to select 28/10/2007 in the date text field, the options in the select menu should automatically limit selections to less than the number of days from the date of the posting (current date) to the selected date. So from today: 19/10 to 28/10 is 9 days, so the options in the select menu would be limited to 9 days (1 day, 2 days, 3 days, 4 days, 5 days, 6 days, 7 days, 8 days, 9 days).

code below (note, the value in the fields is there to show the format)

Code: Select all

<input id="input_dateAvail" onfocus="showCalendarControl(this);" size="12" name="input_dateAvail" value="24/10/2007" type="text">
<select name="requestdays" id="requestdays" class="selectbox" onchange="toggleProceed(new Array('requestdays'), 'submit')">
        <option value="">please select</option>
        <option value="1">1 day</option>
        <option value="2">2 days</option>
        <option value="3">3 days</option>
        <option value="4">4 days</option>
        <option value="5">5 days</option>
        <option value="6">6 days</option>
        <option value="7">7 days</option>
        <option value="8">8 days</option>
        <option value="9">9 days</option>
        <option value="10">10 days</option>
        <option value="11">11 days</option>
        <option value="12">12 days</option>
        <option value="13">13 days</option>
        <option value="14">14 days</option>
        <option value="15">15 days</option>
        <option value="16">16 days</option>
        <option value="17">17 days</option>
        <option value="18">18 days</option>
        <option value="19">19 days</option>
        <option value="20">20 days</option>
        <option value="21">21 days</option>
        <option value="22">22 days</option>
        <option value="23">23 days</option>
        <option value="24">24 days</option>
        <option value="25">25 days</option>
        <option value="26">26 days</option>
        <option value="27">27 days</option>
        <option value="28">28 days</option>
        <option value="29">29 days</option>
        <option value="30">30 days</option>
    </select>

I also wonder how to have some javascript that will generate the option tags on the fly counting out the number of days necessary..

?

[Rakuli]

I think something like the code below might work.

Code: Select all

function updateSelect(inp, sel)
{
    sel = document.getElementById(sel); // Get the id of the select
    var tdy = new Date();
    tdy = tdy.getDate(); // Get today's date
    var lim  = parseInt(inp.value.substr(0,2)); // Get date from input
    
    var numDays = lim - tdy; // number of days to allow
    var optionsString = '';// The string of options
    for (i = 1; i <= numDays; i++)
      optionsString += '<option value="'+i+'">'+i+' days</option>';

    sel.innerHTML = optionsString;
}

Then add to the text input onchange="updateSelect(this, 'requestDays')"

I haven't tested it but the theory looks okay (famous last words )

Cheers