locked
How to pass varaiable values from one page to another using Jquery? RRS feed

  • Question

  • User-851246726 posted

    I have a requirement in which I want to do following:

    1) User select date value using a drop down menu in format "MM-DD-YYYY"

    2) The Jquery saves the selected value in a variable and transfer the value to the next page

    3) The 2nd page accepts the value and the drop down consumes the passed value

    Issue: My values are being passed BUT how my drop down will consume the value?

    MyPage1.html

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <!--
        <script type="text/javascript">
        function pprint() {
            document.getElementById('Date_Month').value = '10';
            document.getElementById('Date_Day').value = '10';
            document.getElementById('Date_Year').value = '2011';
    
      
        }
        </script>
        -->
    </head>
    <body>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
       
        <input type="button" id="btnQueryString" value="Send" />
        <script type="text/javascript">
            $(function () {
                $("#btnQueryString").bind("click", function () {
    
                    var mymonth = document.getElementById('Date_Month').value;
                    var myday = document.getElementById('Date_Day').value;
                    var myyear = document.getElementById('Date_Year').value;
    
                    var url = "MyPage2.html?passmonth=" + mymonth + "&passdate=" + myday + "&passyear=" + myyear;
                    window.location.href = url;
                });
            });
        </script>
        <br />
        <br />
        <hr />
    
        <select id="Date_Month" name="my_month">
            <option value="00"></option>
            <option value="01">January</option>
            <option value="02">February</option>
            <option value="03">March</option>
            <option value="04">April</option>
            <option value="05">May</option>
            <option value="06">June</option>
            <option value="07">July</option>
            <option value="08">August</option>
            <option value="09">September</option>
            <option value="10">October</option>
            <option value="11">November</option>
            <option value="12">December</option>
        </select>
        <select id="Date_Day" name="my_day">
            <option value="00"></option>
            <option value="01">1</option>
            <option value="02">2</option>
            <option value="03">3</option>
            <option value="04">4</option>
            <option value="05">5</option>
            <option value="06">6</option>
            <option value="07">7</option>
            <option value="08">8</option>
            <option value="09">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 id="Date_Year" name="my_year">
            <option value="00"></option>
            <option value="2011">2011</option>
            <option value="2012">2012</option>
            <option value="2013">2013</option>
            <option value="2014">2014</option>
            <option value="2015">2015</option>
        </select>
    
    
        <!--
        <input type="button" onclick="pprint()" value="Pass my date">
        -->
    </body>
    </html>

    MyPage2.html

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
    </head>
    <body>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript">
            var queryString = new Array();
            $(function () {
                if (queryString.length == 0) {
                    if (window.location.search.split('?').length > 1) {
                        var params = window.location.search.split('?')[1].split('&');
                        for (var i = 0; i < params.length; i++) {
                            var key = params[i].split('=')[0];
                            var value = decodeURIComponent(params[i].split('=')[1]);
                            queryString[key] = value;
                        }
                    }
                }
                if (queryString["passmonth"] != null && queryString["passdate"] != null && queryString["passyear"] != null) {
                    var data = "<u>Values from QueryString</u><br /><br />";
                    data += "<b>Month:</b> " + queryString["passmonth"] + " <b>Day:</b> " + queryString["passdate"] + " <b>Year:</b> " + queryString["passyear"];
                    $("#lblData").html(data);
    
    
    
    //passing value to the drop down menu here
                    document.getElementById('Date_Month').value = 'passmonth';
                    document.getElementById('Date_Day').value = 'passdate';
                    document.getElementById('Date_Year').value = 'passyear';
                }
            });
        </script>
        <hr />
        <span id="lblData"></span>
        <br/>
        <hr />
        <select id="Date_Month" name="my_month">
            <option value="00"></option>
            <option value="01">January</option>
            <option value="02">February</option>
            <option value="03">March</option>
            <option value="04">April</option>
            <option value="05">May</option>
            <option value="06">June</option>
            <option value="07">July</option>
            <option value="08">August</option>
            <option value="09">September</option>
            <option value="10">October</option>
            <option value="11">November</option>
            <option value="12">December</option>
        </select>
        <select id="Date_Day" name="my_day">
            <option value="00"></option>
            <option value="01">1</option>
            <option value="02">2</option>
            <option value="03">3</option>
            <option value="04">4</option>
            <option value="05">5</option>
            <option value="06">6</option>
            <option value="07">7</option>
            <option value="08">8</option>
            <option value="09">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 id="Date_Year" name="my_year">
            <option value="00"></option>
            <option value="2011">2011</option>
            <option value="2012">2012</option>
            <option value="2013">2013</option>
            <option value="2014">2014</option>
            <option value="2015">2015</option>
        </select>
    </body>
    
    
    
    
    </html>

    Can anyone help please? I need the dropdown menu in 2nd page have the same value already selected (as it was originally selected in dropdown on 1st page and was passed to 2nd page)

    Saturday, February 21, 2015 9:10 PM

All replies

  • User-851246726 posted

    anyone? please help

    Sunday, February 22, 2015 9:08 AM
  • User842257015 posted

    Hi,

    Am trying Jquery to handle this, once you got posted page data like query string values, parse Query string value and follow this code.

     var dateMonth = Query string value for Date_Month Id.
    $("#Date_Month").val(dateMonth);

    Just set the select value for the same.

    Thanks,

    Jai

    Monday, February 23, 2015 12:52 AM
  • User1711366110 posted

    hi jeffcarter,
      AS per your case, you can replace the following code :
    MyPage2.html :

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
    </head>
    <body>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript">
            var queryString = new Array();
            $(function () {
                if (queryString.length == 0) {
                    if (window.location.search.split('?').length > 1) {
                        var params = window.location.search.split('?')[1].split('&');
                        for (var i = 0; i < params.length; i++) {
                            var key = params[i].split('=')[0];
                            var value = decodeURIComponent(params[i].split('=')[1]);
                            queryString[key] = value;
                        }
                    }
                }
                if (queryString["passmonth"] != null && queryString["passdate"] != null && queryString["passyear"] != null) {
                    var data = "<u>Values from QueryString</u><br /><br />";
                    data += "<b>Month:</b> " + queryString["passmonth"] + " <b>Day:</b> " + queryString["passdate"] + " <b>Year:</b> " + queryString["passyear"];
                    $("#lblData").html(data);
    
    
    
    //passing value to the drop down menu here
    
    //document.getElementById('Date_Month').value = 'passmonth';
    //document.getElementById('Date_Day').value = 'passdate';
    //document.getElementById('Date_Year').value = 'passyear';
    
    $('#Date_Month option').filter(function () { return $(this).html() == queryString["passmonth"]; }).prop('selected',true); $('#Date_Day option').filter(function () { return $(this).html() == queryString["passdate"]; }).prop('selected', true); $('#Date_Year option').filter(function () { return $(this).html() == queryString["passyear"]; }).prop('selected', true); } }); </script> <hr /> <span id="lblData"></span> <br/> <hr /> <select id="Date_Month" name="my_month"> <option value="00"></option> <option value="01">January</option> <option value="02">February</option> <option value="03">March</option> <option value="04">April</option> <option value="05">May</option> <option value="06">June</option> <option value="07">July</option> <option value="08">August</option> <option value="09">September</option> <option value="10">October</option> <option value="11">November</option> <option value="12">December</option> </select> <select id="Date_Day" name="my_day"> <option value="00"></option> <option value="01">1</option> <option value="02">2</option> <option value="03">3</option> <option value="04">4</option> <option value="05">5</option> <option value="06">6</option> <option value="07">7</option> <option value="08">8</option> <option value="09">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 id="Date_Year" name="my_year"> <option value="00"></option> <option value="2011">2011</option> <option value="2012">2012</option> <option value="2013">2013</option> <option value="2014">2014</option> <option value="2015">2015</option> </select> </body> </html>

    --
    with regards,
    Edwin

    Monday, February 23, 2015 1:12 AM
  • User-851246726 posted

    It is not working for Month and Day, only year drop down is getting populated on MyPage2.html? Please help.

    Monday, February 23, 2015 6:40 AM
  • User-851246726 posted
    Anyone?
    Monday, February 23, 2015 9:05 AM
  • User2009744128 posted

    hi jeffcarter,

    Please follow this link:

    http://www.codeproject.com/Tips/826979/How-to-Send-Data-from-One-aspx-Page-to-Another-usi 

    Hope this helps. Please revert in case of any doubts.

    Monday, February 23, 2015 3:42 PM
  • User1689970273 posted

    For simplicity sake,

    you may use the following.
                      $("#Date_Month").prop("selectedIndex", queryString["passmonth"]);
                      $("#Date_Day").prop("selectedIndex", queryString["passdate"]);        
                      $("select#Date_Year").val(queryString['passyear']);           

    Monday, February 23, 2015 4:43 PM