/    Sign up×
Community /Pin to ProfileBookmark

Dynamically updating select elements

Copy linkTweet thisAlerts:
Apr 13.2004

Hey guys,

I’m trying to use JavaScript to update the value of a drop down list based on the value of another drop down list. What I need to do is this:

The first drop down list has 30 dates in it, ranging from 7 days in advance of today’s date up to 37 days in advance of today. This list is called “statedate”.

The second drop down list has 14 dates in it, ranging from 1 day to 14 days past the value of “startdate”. This list is called “enddate”.

I need the default value of startdate to be 7 days from today, and enddate to be 14 from the date of startdate. I need the list of dates in enddate to change whenever the user changes the date of startdate, with the user then able to change the value of enddate to anywhere within that 2 week span.

I’ve wrestled with trying to come up with a JavaScript to do this with no luck.

Any help?

to post a comment
JavaScript

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@neil9999Apr 13.2004 — What is this for? If it is for booking a holiday or something, people could change their computer's date to get the dates they wanted.

Neil
Copy linkTweet thisAlerts:
@crh3675Apr 13.2004 — <i>
</i>



&lt;html&gt;
&lt;script type="text/javascript"&gt;

function setStartDate(){
f=document.forms[0];
list1=f.startdate;
list1.length=0;
var start=7;

<i> </i>for(i=0;i&lt;=30;i++){
<i> </i> d=new Date();
<i> </i> var selected=false;
<i> </i> d.setDate(d.getDate()+start+i);
<i> </i> var mdy=(d.getMonth()+1)+"/"+d.getDate()+"/"+d.getFullYear();

<i> </i> list1.options[i]=new Option(mdy,mdy);
<i> </i>}
}

function setEndDate(){
f=document.forms[0];
list1=f.startdate;
list2=f.enddate; <br/>
list2.length=0;

<i> </i>var d=new Date(list1.options[list1.selectedIndex].value);
<i> </i>var start=1;

<i> </i>for(i=0;i&lt;14;i++){
<i> </i> d=new Date(list1.options[list1.selectedIndex].value);
<i> </i> var selected=false;
<i> </i> d.setDate(d.getDate()+i+start);

<i> </i> var mdy=(d.getMonth()+1)+"/"+d.getDate()+"/"+d.getFullYear();

<i> </i> if(i==13){
<i> </i> selected=true;
<i> </i> }
<i> </i> list2.options[i]=new Option(mdy,mdy,selected,selected);
<i> </i>}
}


&lt;/script&gt;
&lt;body onload="setStartDate();setEndDate()"&gt;
&lt;form&gt;
&lt;select name="startdate" onchange="setEndDate()"&gt;&lt;/select&gt;

&lt;select name="enddate"&gt;&lt;/select&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;












Copy linkTweet thisAlerts:
@fredmvApr 13.2004 — Firstly, Mark &#8212; I've changed your thread subject to be more relevant as to the problem at hand. This will make it easier for users (or guests) to search the archives should someone else encounter this problem in the future.

Secondly, Craig &#8212; I'd recommend using the [font=courier]getFullYear[/font] method as opposed to [font=courier]getYear[/font] &#8212; as of now the year will display correctly in IE, but fail in Mozilla (it displays "2004" as "104").
Copy linkTweet thisAlerts:
@crh3675Apr 13.2004 — 
I'd recommend using the getFullYear method as opposed to getYear
[/quote]

Already posted the update
Copy linkTweet thisAlerts:
@MarkRadabaauthorApr 13.2004 — Thanks guys! This does exactly what I need. One question though, is there a way to have it display a long date (i.e. "April 13, 2004") for the drop down list, yet have the value of the field as "04/13/2004", as the script has it now?

  • - Mark
    • Copy linkTweet thisAlerts:
    @crh3675Apr 13.2004 — <i>
    </i>&lt;html&gt;
    &lt;script type="text/javascript"&gt;

    var months=Array("January","February","March","April","May","June","July","August","September","October","November","December");

    function setStartDate(){
    f=document.forms[0];
    list1=f.startdate;
    list1.length=0;
    var start=7;

    <i> </i>for(i=0;i&lt;=30;i++){
    <i> </i> d=new Date();
    <i> </i> var selected=false;
    <i> </i> d.setDate(d.getDate()+start+i);
    <i> </i> var mdy=(d.getMonth()+1)+"/"+d.getDate()+"/"+d.getFullYear();
    <i> </i> var smdy=months[d.getMonth()]+" "+d.getDate()+", "+d.getFullYear();

    <i> </i> list1.options[i]=new Option(smdy,mdy);
    <i> </i>}
    }

    function setEndDate(){
    f=document.forms[0];
    list1=f.startdate;
    list2=f.enddate; <br/>
    list2.length=0;

    <i> </i>var d=new Date(list1.options[list1.selectedIndex].value);
    <i> </i>var start=1;

    <i> </i>for(i=0;i&lt;14;i++){
    <i> </i> d=new Date(list1.options[list1.selectedIndex].value);
    <i> </i> var selected=false;
    <i> </i> d.setDate(d.getDate()+i+start);

    <i> </i> var mdy=(d.getMonth()+1)+"/"+d.getDate()+"/"+d.getFullYear();
    <i> </i> var smdy=months[d.getMonth()]+" "+d.getDate()+", "+d.getFullYear();

    <i> </i> if(i==13){
    <i> </i> selected=true;
    <i> </i> }
    <i> </i> list2.options[i]=new Option(smdy,mdy,selected,selected);
    <i> </i>}
    }


    &lt;/script&gt;
    &lt;body onload="setStartDate();setEndDate()"&gt;
    &lt;form&gt;
    &lt;select name="startdate" onchange="setEndDate()"&gt;&lt;/select&gt;

    &lt;select name="enddate"&gt;&lt;/select&gt;
    &lt;/form&gt;
    &lt;/body&gt;
    &lt;/html&gt;
    Copy linkTweet thisAlerts:
    @MarkRadabaauthorApr 14.2004 — Thanks again, guys! Got one more question concerning this script...

    Let's say I pull up a record from a databas that contains a value for startdate and enddate. I'm using ASP (VBScript) to pull this information from the db. Now, I need to pass the value of the enddate to the javascript, and have it test that value to make sure it's within the 30 days allowed by startdate, and it so, select that date as default (but still only allow the select list to contain dates from 7 to 37 days from today).

    How can I do that? Pass a variable to the javascript in the "onload=" function in the body tag?

  • - Mark
    • Copy linkTweet thisAlerts:
    @crh3675Apr 14.2004 — <i>
    </i>function setEndDate(){
    f=document.forms[0];
    list1=f.startdate;
    list2=f.enddate; <br/>
    list2.length=0;

    <i> </i>var d=new Date(list1.options[list1.selectedIndex].value);
    <i> </i>var start=1;
    <i> </i>var vbDate="&lt;%=FormatDateTime(yourdatevalue,vbShortDate)%&gt;";
    <i> </i>var found=false;

    <i> </i>for(i=0;i&lt;14;i++){
    <i> </i> d=new Date(list1.options[list1.selectedIndex].value);
    <i> </i> var selected=false;
    <i> </i> d.setDate(d.getDate()+i+start);

    <i> </i> var mdy=(d.getMonth()+1)+"/"+d.getDate()+"/"+d.getFullYear();
    <i> </i> var smdy=months[d.getMonth()]+" "+d.getDate()+", "+d.getFullYear();

    <i> </i> if(vbDate==mdy){
    <i> </i> found=true;
    <i> </i> selected=true;
    <i> </i> }

    <i> </i> if(i==13 &amp;&amp; selected==false){
    <i> </i> selected=true;
    <i> </i> }
    <i> </i> list2.options[i]=new Option(smdy,mdy,selected,selected);
    <i> </i>}
    <i> </i>if(found==false){
    <i> </i> alert("The date provided does fall within the acceptable range.");
    <i> </i>}
    }
    ×

    Success!

    Help @MarkRadaba spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.3,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,

    tipper: @Samric24,
    tipped: article
    amount: 1000 SATS,
    )...