NO JQUERY! I want to be able to refresh the page and have the

Question

0

Asked: June 10, 20262026-06-10T03:39:48+00:00 2026-06-10T03:39:48+00:00

NO JQUERY! I want to be able to refresh the page and have the

0

NO JQUERY! I want to be able to refresh the page and have the values of my dropdown reset to the blank(first option). But if I go to the page fill something out and refresh the page, it keeps the text of the option that was previously in the drop down. Does anyone know how to achieve this??

Here is the dropdown I’m using. If you would like to see all of the code I can post it.

<select style="float:left;" id="leave" onchange="changeMessage(this);">
      <option value="0"></option>
      <option value="5">Get Married</option>
      <option value="100">Have a Baby</option>
      <option value="90">Adopt a Child</option>
      <option value="35">Retire</option>
      <option value="15">Military Leave</option>
      <option value="25">Medical Leave</option>
</select>

Here is all of the code…

<html>
<head>
<title>Life Event Picker Calendar</title>
<script>
function changeMessage(oElement) {
    var rd1 = document.getElementById("rd1");
    var rd1Text = rd1.parentNode.getElementsByTagName('span')[0];
    var rd2 = document.getElementById("rd2");
    var rd2Text = rd2.parentNode.getElementsByTagName('span')[0];

    document.getElementById("message1").innerHTML = "";
    document.getElementById("message2").innerHTML = "";
    document.getElementById("message3").innerHTML = "";
    document.getElementById("message4").innerHTML = "";
    document.getElementById("message5").innerHTML = "";

    rd1.checked = false;
    rd2.checked = false;
    //nothing
    if (oElement.value == "0") {
        document.getElementById("btn").style.display = "none";
        document.getElementById("radio").style.display = "none";
        document.getElementById("day").innerHTML = "Date";
    //have a baby
    } else if (oElement.value == "100") {
        document.getElementById("btn").style.display = "none";
        document.getElementById("radio").style.clear = "both";
        document.getElementById("radio").style.display = "inline-block";
        rd1Text.innerHTML = "C-Section";
        rd2Text.innerHTML = "Regular Birth";
        rd1.value = "C-Section";
        rd2.value = "Regular Birth";
        document.getElementById("day").innerHTML = "Anticipated Due Date";
    //military leave
    } else if (oElement.value == "15") {
        document.getElementById("btn").style.display = "none";
        document.getElementById("radio").style.clear = "both";
        document.getElementById("radio").style.display = "inline-block";
        rd1Text.innerHTML = "Training";
        rd2Text.innerHTML = "Active Duty";
        rd1.value = "Training";
        rd2.value = "Active Duty";
        document.getElementById("day").innerHTML = "Anticipated Leave Date";
    //get married
    } else if (oElement.value == "5") {
        document.getElementById("btn").style.display = "inline-block";
        document.getElementById("radio").style.display = "none";
        document.getElementById("day").innerHTML = "Marriage Date";
    //adopt a child
    } else if (oElement.value == "90") {
        document.getElementById("btn").style.display = "inline-block";
        document.getElementById("radio").style.display = "none";
        document.getElementById("day").innerHTML = "Anticipated Adoption Date";
    //retire
    } else if (oElement.value == "35") {
        document.getElementById("btn").style.display = "inline-block";
        document.getElementById("radio").style.display = "none";
        document.getElementById("day").innerHTML = "Anticipated Retirement Date";
    //medical leave
    } else if (oElement.value == "25") {
        document.getElementById("btn").style.display = "inline-block";
        document.getElementById("radio").style.display = "none";
        document.getElementById("day").innerHTML = "Anticipated Disability Date";       
    } else {}
    return;
}

function showChoice(input) {
    document.getElementById("btn").style.display = "inline-block";
}

//gets info picked and displays messages
function getInfo() {
    var myDate=new Date();
    var ev_num = parseInt(document.getElementById("leave").value)
    myDate.setFullYear(sel_year.value,sel_month.value,sel_day.value);
    var event_value = document.getElementById("leave").value;

    //get married
    if (event_value == 5) {
        var first_number = new Date(myDate);
        first_number.setDate(myDate.getDate() + 31);
        document.getElementById("message1").innerHTML = "From " + myDate + " through " + first_number + "<br/>" + "You are eligible to update coverage and personal information through your 'Get Married' Life Event.";
        document.getElementById("message2").innerHTML = "";
        document.getElementById("message3").innerHTML = "";
        document.getElementById("message4").innerHTML = "";
        document.getElementById("message5").innerHTML = "";

    //have a baby
    } else if (event_value == 100) {
        var first_number = new Date(myDate);
        first_number.setDate(myDate.getDate() + 31);
        var second_number = new Date(myDate);
        second_number.setDate(myDate.getDate() - 30);
        var third_number = new Date(myDate);
        third_number.setDate(myDate.getDate() + 7);

        document.getElementById("message1").innerHTML = "From " + myDate + " through " + first_number + "<br/>" + "You are eligible to update coverage and personal information through your 'Have a Baby' Life Event.";
        document.getElementById("message2").innerHTML = "From " + second_number + " through " + myDate + "<br/>" + "1) Call 1-877-968-7762 to initiate your leave. <br/>" + "2) Complete Authorization Release Form.";
        document.getElementById("message3").innerHTML = "From " + myDate + " through " + third_number + "<br/>Contact a Leave Specialist at the HR Service Center to request paid days if not enough Occasional Absence days.";

        var fourth_number;
        var fifth_number1;
        var fifth_number2;
        //C Section 
        if ((document.getElementById("rd1").checked) == true) {
            fourth_number = new Date(myDate);
            fourth_number.setDate(myDate.getDate() + 56);
            fifth_number1 = new Date(myDate);
            fifth_number1.setDate(myDate.getDate() + 57);
            fifth_number2 = new Date(myDate);
            fifth_number2.setDate(myDate.getDate() + 91);

            document.getElementById("message4").innerHTML = myDate + " up to " + fourth_number + "<br/>1) Benefits deducted from STD pay.<br/>2) Checkpoint to determine return to work date.";
            document.getElementById("message5").innerHTML = fifth_number1 + " up to " + fifth_number2 + "<br/>1) Paid time off is up to five paid days.<br/>2) FML job protection is up to 13 weeks.<br/>3) Benefit bill sent once STD ends.";

        //Regular Birth
        } else {
            fourth_number = new Date(myDate);
            fourth_number.setDate(myDate.getDate() + 42);
            fifth_number1 = new Date(myDate);
            fifth_number1.setDate(myDate.getDate() + 43);
            fifth_number2 = new Date(myDate);
            fifth_number2.setDate(myDate.getDate() + 91);

            document.getElementById("message4").innerHTML = "From " + myDate + " through " + fourth_number + "<br/>1) Benefits deducted from STD pay.<br/>Checkpoint to determine return to work date.";
            document.getElementById("message5").innerHTML = fifth_number1 + " up to " + fifth_number2 + "<br/>1) Paid time off is up to five paid days.<br/>2) FML job protection is up to 13 weeks.<br/>3) Benefit bill sent once STD ends.";
        }

    //adopt a child 
    } else if (event_value == 90) {
        var first_number = new Date(myDate);
        first_number.setDate(myDate.getDate() + 31);
        var second_number = new Date(myDate);
        second_number.setDate(myDate.getDate() - 30);
        var third_number = new Date(myDate);
        third_number.setDate(myDate.getDate() + 91);

        document.getElementById("message1").innerHTML = "From " + myDate + " through " + first_number + "<br/>" + "You are eligible to update coverage and personal information through your 'Have a Child' Life Event.";
        document.getElementById("message2").innerHTML = "From " + second_number + " through " + myDate + "<br/>" + "Call 1-877-968-7762 to initiate your leave.";
        document.getElementById("message3").innerHTML = "From " + myDate + " through " + third_number + "<br/>1) Adoption time off is up to 10 paid days.<br/>2) FML job protection up to 13 weeks.";
        document.getElementById("message4").innerHTML = "";
        document.getElementById("message5").innerHTML = "";

    //retire
    } else if (event_value == 35) {
        var second_number = new Date(myDate);
        second_number.setDate(myDate.getDate() - 90);
        var third_number = new Date(myDate);
        third_number.setDate(myDate.getDate() + 30);
        var fourth_number = new Date(myDate);
        fourth_number.setDate(myDate.getDate() + 60);

        document.getElementById("message1").innerHTML = "";
        document.getElementById("message2").innerHTML = "From " + second_number + " through " + myDate + "<br/>Call 1-877-968-7762 to initiate your retirement.<br/>2) Make Pension election/return form.<br/>3) Review Savings/401(k) Options.<br/>4) View Medical Options.<br/>5) Review/Confirm beneficiaries.";
        document.getElementById("message3").innerHTML = "From " + myDate + " through " + third_number + "<br/>Enroll in Medical Plan Options if applicable.";
        document.getElementById("message4").innerHTML = "From " + myDate + " through " + fourth_number + "<br/>1) Enroll in COBRA<br/>2) Payoff any 401(k) loans.";
        document.getElementById("message5").innerHTML = "";

    //military leave
    } else if (event_value == 15) {
        var second_number = new Date(myDate);
        second_number.setDate(myDate.getDate() - 30);
        var third_number
        var fourth_number;

        document.getElementById("message1").innerHTML = "";
        document.getElementById("message2").innerHTML = "From " + second_number + " through " + myDate + "<br/>Call 1-877-968-7762 to initiate your leave.";
        document.getElementById("message5").innerHTML = "";

        //Training Leave
        if ((document.getElementById("rd1").checked) == true) {
            third_number = new Date(myDate);
            third_number.setDate(myDate.getDate() + 14);
            fourth_number = new Date(myDate);
            fourth_number.setDate(myDate.getDate() + 15);

            document.getElementById("message3").innerHTML = "From " + myDate + " through " + third_number + "<br/>You are eligible to receive 100% pay.";
            document.getElementById("message4").innerHTML = "After " + fourth_number + "<br/>Your leave will be unpaid.";

        //Active Duty
        } else {
            third_number = new Date(myDate);
            third_number.setDate(myDate.getDate() + 365);

            document.getElementById("message3").innerHTML = "From " + myDate + " through " + third_number + "<br/>You are eligible to receive 50% pay.";
            document.getElementById("message4").innerHTML = "After " + third_number + "<br/>Your leave will be unpaid.";
        }

    //medical leave
    } else if (event_value == 25) {
        var first_number = new Date(myDate);
        first_number.setDate(myDate.getDate() + 31);
        var second_number = new Date(myDate);
        second_number.setDate(myDate.getDate() - 30);
        var third_number = new Date(myDate);
        third_number.setDate(myDate.getDate() + 7);
        var fourth_number = new Date(myDate);
        fourth_number.setDate(myDate.getDate() + 91);

        document.getElementById("message1").innerHTML = "From " + myDate + " through " + first_number + "<br/>You are eligible to update coverage and personal information through your 'Take Medical Leave' Life Event.";
        document.getElementById("message2").innerHTML = "From " + second_number + " through " + myDate + "<br/>1) Call 1-877-968-7762 to initiate your leave. <br/>2) Complete Authorization Release Form.";
        document.getElementById("message3").innerHTML = "From " + myDate + " through " + third_number + "<br/>Contact a Leave Specialist at the HR Service Center to request paid days if not enough Occasional Absence days.";
        document.getElementById("message4").innerHTML = "From " + myDate + " through " + fourth_number + "<br/>1) Benefits deducted from STD pay.<br/>2) Checkpoint to determine return to work date.";
        document.getElementById("message5").innerHTML = "After " + fourth_number + "<br/>Contact will be made to initiate the LTD application process prior to 92nd day.";



    } else {}
}
</script>
</head>
<body>

Life Event Picker Calendar<br>
<hr align="left" width="200px"/>
<div id="life" style="float:left;">Life Event</div><div id="day" style="display:float:left; margin-left:120px;">Date</div>

    <select style="float:left;" id="leave" onchange="changeMessage(this);">
          <option selected="selected"value="0"></option>
          <option value="5">Get Married</option>
          <option value="100">Have a Baby</option>
          <option value="90">Adopt a Child</option>
          <option value="35">Retire</option>
          <option value="15">Military Leave</option>
          <option value="25">Medical Leave</option>
    </select>    

<div id="calendar-container" style="float:left;" ></div>

    <button id="btn" style="display:none;" onclick="getInfo()"type="button">Process</button>

<br>
<div id="radio" style="display:none">
    <label><span></span><input type="radio" name="radio" id="rd1" value="" onclick="showChoice(this)"/></label>
    <label><span></span><input type="radio" name="radio" id="rd2" value="" onclick="showChoice(this)"/></label>
</div>

<br>
<div id="date"></div>
<div id="event"></div>
<div id="return"></div>
<div id="yourdate"></div>

<div id="message1"></div><br>
<div id="message2"></div><br>
<div id="message3"></div><br>
<div id="message4"></div><br>
<div id="message5"></div>

<script type="text/javascript">
//creates the element variables for the drop downs
//need to be up here for getInfo() to work
var sel_year = document.createElement('select'),
    sel_month = document.createElement('select'),
    sel_day = document.createElement('select');


//function that creates id calendar-container
(function() {
    //variables and values for years
    var yr1 = 2011,
        yr2 = 2012,
        yr3 = 2013,
        yr4 = 2014;
    var years = [yr1, yr2, yr3, yr4];
    //array with months and associated days
    var calendar = [
        ["January", 31], ["February", 28], ["March", 31], ["April", 30], ["May", 31], ["June", 30], ["July", 31], ["August", 31], ["September", 30],
        ["October", 31], ["November", 30], ["December", 31]],
        //this is the variable that accesses the content
        cont = document.getElementById('calendar-container');

    //creates year/month/day options and sets their values (month value is -1 for date calculation)
    function createOption(txt, val) {
        var option = document.createElement('option');
        option.value = val;
        option.appendChild(document.createTextNode(txt));
        return option;
    }

    //this clears any elements for days, months, years
    function clearChildren(ele) {
        while (ele.hasChildNodes()) {
            ele.removeChild(ele.lastChild);
        }
    }

    //this function is triggered when you change the year or month
    function recalculateDays() {
        var year_index = sel_year.value;
        var month_index = sel_month.value,
            df = document.createDocumentFragment();
        if ((month_index == 1) && (year_index % 4 == 0)) {
            for (var i = 0, l = calendar[month_index][1]; i < l + 1; i++) {
                //the first variable is what number will be displayed in the day drop down
                df.appendChild(createOption(i + 1, i + 1));
            }
        } else {
            //l is the variable for the number of days in the month from the array above ex:28, 30, 31
            for (var i = 0, l = calendar[month_index][1]; i < l; i++) {
                //the first variable is what number will be displayed in the day drop down
                df.appendChild(createOption(i + 1, i + 1));
            }
        }
        clearChildren(sel_day);
        sel_day.appendChild(df);
    }

    //this creates the month values
    function generateMonths() {
        var df = document.createDocumentFragment();
        for (var i = 0; i < calendar.length; i++) {
            df.appendChild(createOption(calendar[i][0], i));
        }
        //clears past months
        clearChildren(sel_month);
        //appends new months onto variable df
        sel_month.appendChild(df);
    }

    //this creates the year values
    function generateYears() {
        var df = document.createDocumentFragment();
        for (var i = 0; i < years.length; i++) {
            df.appendChild(createOption(years[i], years[i]));
        }
        //clears past months
        clearChildren(sel_year);
        //appends new months onto variable df
        sel_year.appendChild(df);
    }

    //anytime the month/year selector is changed this calls the function to change the days
    sel_month.onchange = recalculateDays;
    sel_year.onchange = recalculateDays;

    //runs the months and days functions
    generateYears();
    generateMonths();
    recalculateDays();

    //this is what displays each of the individual drop downs after everything has been done to them
    cont.appendChild(sel_year);
    cont.appendChild(sel_month);
    cont.appendChild(sel_day);

}());

</script>

</body>
</html>

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-06-10T03:39:50+00:00

Editorial Team

2026-06-10T03:39:50+00:00Added an answer on June 10, 2026 at 3:39 am

Try this:

<body onLoad="document.getElementById('leave').options[0].selected = 'selected';">

0

Reply
Share
Share

- Report

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

NO JQUERY! I want to be able to refresh the page and have the

Leave an answerCancel reply

1 Answer

Leave an answer
Cancel reply