Question

I'm looking for any suggestions on why this script is not working prior to IE 9, so far as I know. I've tried using previous browser settings via IE 9 and it works for it's standards for IE 8 and 7.

<body>
    <div class="custom-field-container form-row ">
        <div class="form-content">
            <div class="form-input-label-block">
                <label for="date_of_birth_date_MONTH">Date Of Birth</label>
            </div>
            <fieldset>
                <label for="date_of_birth_date_MONTH"><span style="display:none;">Month</span></label>
                <label for="date_of_birth_date_DAY"><span style="display:none;">Day</span></label>
                <label for="date_of_birth_date_YEAR"><span style="display:none;">Year</span></label>
                <select name="date_of_birth_date_MONTH" id="date_of_birth_date_MONTH" title="Month">
                    <option value="1" >Jan</option>
                    <option value="2" >Feb</option>
                    <option value="3" >Mar</option>
                    <option value="4" >Apr</option>
                    <option value="5" >May</option>
                    <option value="6" >Jun</option>
                    <option value="7" >Jul</option>
                    <option value="8" >Aug</option>
                    <option value="9" >Sep</option>
                    <option value="10" selected="selected">Oct</option>
                    <option value="11" >Nov</option>
                    <option value="12" >Dec</option>
                </select>
                <select name="date_of_birth_date_DAY" id="date_of_birth_date_DAY" title="Day">
                    <option value="1" >1</option>
                    <option value="2" >2</option>
                    <option value="3" >3</option>
                    <option value="4" >4</option>
                    <option value="5" >5</option>
                    <option value="6" >6</option>
                    <option value="7" >7</option>
                    <option value="8" selected="selected">8</option>
                    <option value="9" >9</option>
                    <option value="10" >10</option>
                    <option value="11" >11</option>
                    <option value="12" >12</option>
                    <option value="13" >13</option>
                    <option value="14" >14</option>
                    <option value="15" >15</option>
                    <option value="16" >16</option>
                    <option value="17" >17</option>
                    <option value="18" >18</option>
                    <option value="19" >19</option>
                    <option value="20" >20</option>
                    <option value="21" >21</option>
                    <option value="22" >22</option>
                    <option value="23" >23</option>
                    <option value="24" >24</option>
                    <option value="25" >25</option>
                    <option value="26" >26</option>
                    <option value="27" >27</option>
                    <option value="28" >28</option>
                    <option value="29" >29</option>
                    <option value="30" >30</option>
                    <option value="31" >31</option>
                </select>
                <select name="date_of_birth_date_YEAR" id="date_of_birth_date_YEAR" title="Year">
                    <option value="2015" >2015</option>
                    <option value="2014" >2014</option>
                    <option value="2013" selected="selected">2013</option>
                    <option value="2012" >2012</option>
                    <option value="2011" >2011</option>
                    <option value="2010" >2010</option>
                    <option value="2009" >2009</option>
                    <option value="2008" >2008</option>
                    <option value="2007" >2007</option>
                    <option value="2006" >2006</option>
                    <option value="2005" >2005</option>
                    <option value="2004" >2004</option>
                    <option value="2003" >2003</option>
                    <option value="2002" >2002</option>
                    <option value="2001" >2001</option>
                    <option value="2000" >2000</option>
                    <option value="1999" >1999</option>
                    <option value="1998" >1998</option>
                    <option value="1997" >1997</option>
                    <option value="1996" >1996</option>
                    <option value="1995" >1995</option>
                    <option value="1994" >1994</option>
                    <option value="1993" >1993</option>
                    <option value="1992" >1992</option>
                    <option value="1991" >1991</option>
                    <option value="1990" >1990</option>
                    <option value="1989" >1989</option>
                    <option value="1988" >1988</option>
                    <option value="1987" >1987</option>
                    <option value="1986" >1986</option>
                    <option value="1985" >1985</option>
                    <option value="1984" >1984</option>
                    <option value="1983" >1983</option>
                    <option value="1982" >1982</option>
                    <option value="1981" >1981</option>
                    <option value="1980" >1980</option>
                    <option value="1979" >1979</option>
                    <option value="1978" >1978</option>
                    <option value="1977" >1977</option>
                    <option value="1976" >1976</option>
                    <option value="1975" >1975</option>
                    <option value="1974" >1974</option>
                    <option value="1973" >1973</option>
                    <option value="1972" >1972</option>
                    <option value="1971" >1971</option>
                    <option value="1970" >1970</option>
                    <option value="1969" >1969</option>
                    <option value="1968" >1968</option>
                    <option value="1967" >1967</option>
                    <option value="1966" >1966</option>
                    <option value="1965" >1965</option>
                    <option value="1964" >1964</option>
                    <option value="1963" >1963</option>
                    <option value="1962" >1962</option>
                    <option value="1961" >1961</option>
                    <option value="1960" >1960</option>
                    <option value="1959" >1959</option>
                    <option value="1958" >1958</option>
                    <option value="1957" >1957</option>
                    <option value="1956" >1956</option>
                    <option value="1955" >1955</option>
                    <option value="1954" >1954</option>
                    <option value="1953" >1953</option>
                    <option value="1952" >1952</option>
                    <option value="1951" >1951</option>
                    <option value="1950" >1950</option>
                    <option value="1949" >1949</option>
                    <option value="1948" >1948</option>
                    <option value="1947" >1947</option>
                    <option value="1946" >1946</option>
                    <option value="1945" >1945</option>
                    <option value="1944" >1944</option>
                    <option value="1943" >1943</option>
                    <option value="1942" >1942</option>
                    <option value="1941" >1941</option>
                    <option value="1940" >1940</option>
                    <option value="1939" >1939</option>
                    <option value="1938" >1938</option>
                    <option value="1937" >1937</option>
                    <option value="1936" >1936</option>
                    <option value="1935" >1935</option>
                    <option value="1934" >1934</option>
                    <option value="1933" >1933</option>
                    <option value="1932" >1932</option>
                    <option value="1931" >1931</option>
                    <option value="1930" >1930</option>
                    <option value="1929" >1929</option>
                    <option value="1928" >1928</option>
                    <option value="1927" >1927</option>
                    <option value="1926" >1926</option>
                    <option value="1925" >1925</option>
                    <option value="1924" >1924</option>
                    <option value="1923" >1923</option>
                    <option value="1922" >1922</option>
                    <option value="1921" >1921</option>
                    <option value="1920" >1920</option>
                    <option value="1919" >1919</option>
                    <option value="1918" >1918</option>
                    <option value="1917" >1917</option>
                    <option value="1916" >1916</option>
                    <option value="1915" >1915</option>
                    <option value="1914" >1914</option>
                    <option value="1913" >1913</option>
                    <option value="1912" >1912</option>
                    <option value="1911" >1911</option>
                    <option value="1910" >1910</option>
                    <option value="1909" >1909</option>
                    <option value="1908" >1908</option>
                    <option value="1907" >1907</option>
                    <option value="1906" >1906</option>
                    <option value="1905" >1905</option>
                    <option value="1904" >1904</option>
                    <option value="1903" >1903</option>
                    <option value="1902" >1902</option>
                    <option value="1901" >1901</option>
                    <option value="1900" >1900</option>
                </select>
            </fieldset>
            <input type="hidden" name="date_of_birthsubmit" id="date_of_birthsubmit" value="true" />
        </div>
    </div>

    <div>
        <p>After entering your date of birth, click the 'Calculate Fee' button to determine what your one-time cost of lifetime membership will be.</p>
        <div id="calculateAge" class="step-button next-step"> Calculate Fee </div>
        <p id="feeInfo" style="display: none;">Your <span class="paymentNumber">one time fee</span> for lifetime membership totals just <span class="memberFee"></span> today.</p>
    </div>

    <div id="250group" style="display: none;">
        <p>
            <label>
                <input id="fee250_0" name="fee250" type="radio" value="250s" />
                Single
            </label>
            <br />
            <label>
                <input id="fee250_1" name="fee250" type="radio" value="250q" />
                Quarterly
            </label>
            <br />
            <label>
                <input id="fee250_2" name="fee250" type="radio" value="250m" />
                Monthly
            </label>
        </p>
    </div>

    <div id="230group" style="display: none;">
        <p>
            <label>
                <input id="fee230_0" name="fee230" type="radio" value="230s" />
                Single
            </label>
            <br />
            <label>
                <input id="fee230_1" name="fee230" type="radio" value="230q" />
                Quarterly
            </label>
            <br />
            <label>
                <input id="fee230_2" name="fee230" type="radio" value="230m" />
                Monthly
            </label>
        </p>
    </div>

    <div id="180group" style="display: none;">
        <p>
            <label>
                <input id="fee180_0" name="fee180" type="radio" value="180s" />
                Single
            </label>
            <br />
            <label>
                <input id="fee180_1" name="fee180" type="radio" value="180q" />
                Quarterly
            </label>
            <br />
            <label>
                <input id="fee180_2" name="fee180" type="radio" value="180m" />
                Monthly
            </label>
        </p>
    </div>

    <div id="140group" style="display: none;">
        <p>
            <label>
                <input id="fee140_0" name="fee140" type="radio" value="140s" />
                Single
            </label>
            <br />
            <label>
                <input id="fee140_1" name="fee140" type="radio" value="140q" />
                Quarterly
            </label>
            <br />
            <label>
                <input id="fee140_2" name="fee140" type="radio" value="140m" />
                Monthly
            </label>
        </p>
    </div>
</body>

And the script:

var $j = jQuery.noConflict();
var $ = $j; 

function calcAge(dateString) {
    var birthday = +new Date(dateString);
    return ~~((Date.now() - birthday) / (31557600000));
}

$j(document).ready(function() {
    $j( "#calculateAge" ).click(function getdateString() { 
        var dobYear = $j("#date_of_birth_date_YEAR").val();
        var dobMonth = $j("#date_of_birth_date_MONTH").val();
        var goodMonth =  ( '0' + (dobMonth) ).slice( -2 );
        var dobDay = $j("#date_of_birth_date_DAY").val();
        var goodDay =  ( '0' + (dobDay) ).slice( -2 );
        var dateString = dobYear+"/"+goodMonth+"/"+goodDay;
        var ageRange = calcAge(dateString);

        // alert(ageRange);
        // alert(dateString);

        if (ageRange < 41) {
            $j("#250group, #feeInfo").css("display","inline");
            $j("#140group, #230group, #180group").css("display","none");
            $j("#level_installmentexpanded15681, #level_installmentexpanded15684, #level_installmentexpanded15686").prop('checked',false);
            $j("#level_installmentexpanded15683").prop('checked',true);
            $j(".memberFee").html("$250.00");

            // CleanUp();
        }
        else if (ageRange < 61) {
            $j("#230group, #feeInfo").css("display","inline");
            $j("#250group, #140group, #180group").css("display","none");
            $j("#level_installmentexpanded15683, #level_installmentexpanded15686, #level_installmentexpanded15681").prop('checked',false);
            $j("#level_installmentexpanded15684").prop('checked',true);
            $j(".memberFee").html("$230.00");

            // CleanUp();
        }
        else if (ageRange < 71) {
            $j("#180group, #feeInfo").css("display","inline");
            $j("#250group, #230group, #140group").css("display","none");
            $j("#level_installmentexpanded15683, #level_installmentexpanded15684, #level_installmentexpanded15681").prop('checked',false);
            $j("#level_installmentexpanded15686").prop('checked',true);
            $j(".memberFee").html("$180.00");

            //  CleanUp();
        }
        else if (ageRange < 80) {
            $j("#140group, #feeInfo").css("display","inline");
            $j("#250group, #230group, #180group").css("display","none");
            $j("#level_installmentexpanded15683, #level_installmentexpanded15684, #level_installmentexpanded15686").prop('checked',false);
            $j("#level_installmentexpanded15681").prop('checked',true);
            $j(".memberFee").html("$140.00");

            //  CleanUp();
        }
        else if (ageRange > 79) {
            window.location = 'http://externalsurvey.org/site/Survey?ACTION_REQUIRED=URI_ACTION_USER_REQUESTS&SURVEY_ID=####';
        }
        else {
            $j('.don-tb tr').css("display","inline");

            //  CleanUp();
        } 
    });
})

$j( "#fee250_0" ).click(function() {
    $j("#level_installmentduration").val("S:0");
    $j(".memberFee").html("$250.00");
    $j(".paymentNumber").html("one time fee");
});
$j( "#fee250_1" ).click(function() {
    $j("#level_installmentduration").val("Q:9");
    $j(".memberFee").html("$30.00");
    $j(".paymentNumber").html("9 easy quarterly payments");
});
$j( "#fee250_2" ).click(function() {
    $j("#level_installmentduration").val("M:25");
    $j(".memberFee").html("$10.00");
    $j(".paymentNumber").html("25 easy monthly payments");
});
$j( "#fee230_0" ).click(function() {
    $j("#level_installmentduration").val("S:0");
    $j(".memberFee").html("$230.00");
    $j(".paymentNumber").html("one time fee");
});
$j( "#fee230_1" ).click(function() {
    $j("#level_installmentduration").val("Q:8");
    $j(".memberFee").html("$30.00");
    $j(".paymentNumber").html("8 easy quarterly payments");
});
$j( "#fee230_2" ).click(function() {
    $j("#level_installmentduration").val("M:23");
    $j(".memberFee").html("$10.00");
    $j(".paymentNumber").html("23 easy monthly payments");
});
$j( "#fee180_0" ).click(function() {
    $j("#level_installmentduration").val("S:0");
    $j(".memberFee").html("$180.00");
    $j(".paymentNumber").html("one time fee");
});
$j( "#fee180_1" ).click(function() {
    $j("#level_installmentduration").val("Q:6");
    $j(".memberFee").html("$30.00");
    $j(".paymentNumber").html("6 easy quarterly payments");
});
$j( "#fee180_2" ).click(function() {
    $j("#level_installmentduration").val("M:18");
    $j(".memberFee").html("$10.00");
    $j(".paymentNumber").html("18 easy monthly payments");
});
$j( "#fee140_0" ).click(function() {
    $j("#level_installmentduration").val("S:0");
    $j(".memberFee").html("$140.00");
    $j(".paymentNumber").html("one time fee");
});
$j( "#fee140_1" ).click(function() {
    $j("#level_installmentduration").val("Q:5");
    $j(".memberFee").html("$30.00");
    $j(".paymentNumber").html("5 easy quarterly payments");
});
$j( "#fee140_2" ).click(function() {
    $j("#level_installmentduration").val("M:14");
    $j(".memberFee").html("$10.00");
    $j(".paymentNumber").html("14 easy monthly payments");
});

I hate to post a 'what's wrong with this' question, but I'm stumped and I was hoping to get some insight before trying other methods to test in older browsers. The level_installment id's are part of the structure of a CRM and can be ignored for this.

I have the alerts set up and currently commented out, but those tend to report the most crucial data-steps for my other testing. They are meant to give out a discrete age, e.g. 43 or date, e.g. 12/11/2013. In my reverse browser standards testing, these came out cleanly.

Was it helpful?

Solution 2

You can do this

Date.now = Date.now || function() { return +new Date; }; 

Note: +new Date is shorthand for ToInt32(GetValue(new Date) or new Date.valueOf()

OR you don't want to alter existing code than

<!--[if lt IE 8]>
  Date.now = function() { return +new Date; }; 
<![endif]-->

OTHER TIPS

IE8 does not support Date.now().

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top