CODEWITHSUNDEEP
javascripthtmlcssrefresh
John Doe
John Doe

Reputation: 2060

Resetting values when refreshing page

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>

Upvotes: 2

Views: 8768

Answers (5)

silver
silver

Reputation: 105

Replace myform with the name of your form her:

Window.onload = function(){
    Myform.reset();
}

Regards

Upvotes: 0

Mauno V&#228;h&#228;
Mauno V&#228;h&#228;

Reputation: 9788

Here is solution without using javascript hacks:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Example</title>
    </head>
        <body>
        <select autocomplete="off">
          <option value="0" selected="selected"></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>

        <br /><br />

        <button id="btn" onclick="javascript:location.reload(true)" type="button">Test page reloading</button>


        </body>
        </html>

Edit

Made some testing and added reload button to test that if page is reloaded with javascript or anything which is triggered from your code - it works with every browser I tested so far. (Value is set to default). With IE it seems that it has its own way to handle caching so plain F5 doesn't work like with other browsers(so typical to IE) - however solution I provided tends to work well for common web development where page is either refreshed by js, navigation or form sending etc. (basic user actions at web page.)

Upvotes: 2

Prusse
Prusse

Reputation: 4315

Just loop by the elements and reset them:

<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>
function resetSelect(element){
    var reset = parseInt(element.dataset.reset, 10);
    element.selectedIndex = isNaN(reset) ? 0 : reset;
}
function resetSelects(){
    var els = document.getElementsByClassName('reset') || [];
    for (var i = els.length; i--;){
        if (els[i] && els[i].options)
            resetSelect(els[i]);
    }
}
window.onload = function(){
    resetSelects();
};
</script>
</head>
<body>

<select class='reset' data-reset='0' 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>   

</body>
</html>

Upvotes: 0

FedeX
FedeX

Reputation: 446

Try this:

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

Upvotes: 4

Ivan
Ivan

Reputation: 453

Not sure if I understand, but try with simple:

<option value="0" SELECTED></option>

Upvotes: 1

Related Questions