how to pass value one page to another page using html

Question

Hi I have a Pricing table that was created in javascript, what I need to know is how to pass the values in row 1 or 2 into a aspx page using javascript with the click of a button

Here my code:

 <select style="padding:10px;background: #cb1c69;color: #FFFFFF; font-size:18px; border-radius: 11px;">
                        <option>Choose Your Plan</option>
                        <option value="red">Monthly</option>
                        <option value="green">Yearly</option>
                        <option value="blue">Perpetual</option>
                    </select>

Edition:

<div class="pricetable-column  red box" style="width: 33.3333333333%; border-right:1px solid gray;">
                            <div class="pricetable-column-wall">
                                <div class="pricetable-header">
                                    <div class="pricetable-fld-name">
                                        Lite</div>
                                    <div class="pricetable-header-inner">
                                        <div class="pricetable-fld-price">
                                            <span class="cur"></span>750/- Monthly</div>
                                        <p>
                                            ( Minimum 6 Month)</p>
                                    </div>
                                </div>
                                <div class="ribbon">
                                    HOT</div>
                                <div class="pricetable-button-container1">
                                    <a href="#">Buy Now</a>

                                </div>
                            </div>
                        </div>

I want if i click the buy now button and value get go to another page. I mean billing options page

please help me sir

I don't know how to use javascript.

update code:

Source code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
   Name:
<input type="text" id="txtName" name="Name" value="Mudassar Khan" /><br />
<br />
Technology:
<select id="ddlTechnolgy" name="Technology">
    <option value="ASP.Net">ASP.Net</option>
    <option value="PHP">PHP</option>
    <option value="JSP">JSP</option>
</select>

<input type="button" id="btnQueryString" value="Send" />
<script type="text/javascript">
    $(function () {
        $("#btnQueryString").bind("click", function () {
            var url = "MyPage2.html?name=" + encodeURIComponent($("#txtName").val()) + "&technology=" + encodeURIComponent($("#ddlTechnolgy").val());
            window.location.href = url;
        });
    });
</script>

Destination Code:

<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["name"] != null && queryString["technology"] != null) {
            var data = "<u>Values from QueryString</u><br /><br />";
            data += "<b>Name:</b> " + queryString["name"] + " <b>Technology:</b> " + queryString["technology"];
            $("#lblData").html(data);
        }
    });
</script>

Any problem my code:

http://stackoverflow.com/questions/7267519/how-can-i-pass-a-value-from-one-html-page-to-another-using-javascript — EugenSunic, Sep 12 '15 at 05:56
sir i don't know sir javascript if u don't mind can you run the code in jsfiddle@eugensunic — , Sep 12 '15 at 06:01
If you do not know JS you need to go to rentacoder - this site is not for gimmetehcodez type questions — mplungjan, Sep 12 '15 at 06:21

score 3 · Accepted Answer · answered Sep 12 '15 at 06:03

Plese try this code according to your requirement:

Source Page:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Name:
<input type="text" id="txtName" name="Name" value="Mudassar Khan" /><br />
<br />
Technology:
<select id="ddlTechnolgy" name="Technology">
    <option value="ASP.Net">ASP.Net</option>
    <option value="PHP">PHP</option>
    <option value="JSP">JSP</option>
</select>

<input type="button" id="btnQueryString" value="Send" />
<script type="text/javascript">
    $(function () {
        $("#btnQueryString").bind("click", function () {
            var url = "Page2.htm?name=" + encodeURIComponent($("#txtName").val()) + "&technology=" + encodeURIComponent($("#ddlTechnolgy").val());
            window.location.href = url;
        });
    });
</script>

Destination Page

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<span id = "lblData"></span>

<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["name"] != null && queryString["technology"] != null) {
            var data = "<u>Values from QueryString</u><br /><br />";
            data += "<b>Name:</b> " + queryString["name"] + " <b>Technology:</b> " + queryString["technology"];
            $("#lblData").html(data);
        }
    });
</script>

I click send button open second page but not display the value — , Sep 12 '15 at 06:13
Hi, Here i am used querystring. The Source Page has an HTML Button with a jQuery Click event handler. When the Button is clicked, the values of the Name TextBox and the Technology DropDownList is set as QueryString Parameter and then the page is redirected to the Destination page — , Sep 12 '15 at 06:23
Now i try Source Page: and Destination Page . First page work but second page value not opened.what can i do sir. — , Sep 12 '15 at 06:29
Please go through this url this will help you: http://www.aspsnippets.com/Articles/Send-Pass-Data-Values-from-one-page-to-another-using-jQuery.aspx — , Sep 12 '15 at 06:35
If this question like you then please upvote my question@DotNetWeblineindia — , Sep 12 '15 at 06:47

score 1 · Answer 2 · edited May 23 '17 at 11:52

You have multiple options to do so:

sessionStorage

Example:

sessionStorage.setItem('key', 'value');//to set value sessionStorage.getItem('key');//to get the value

localStorage

Example:

localStorage.setItem('key', 'value');//to set value localStorage.getItem('key');//to get the value

Cookies

Example: Ref

var createCookie = function(name, value, days) {
    var expires;
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toGMTString();
    }
    else {
        expires = "";
    }
    document.cookie = name + "=" + value + expires + "; path=/";
}

function getCookie(c_name) {
    if (document.cookie.length > 0) {
        c_start = document.cookie.indexOf(c_name + "=");
        if (c_start != -1) {
            c_start = c_start + c_name.length + 1;
            c_end = document.cookie.indexOf(";", c_start);
            if (c_end == -1) {
                c_end = document.cookie.length;
            }
            return unescape(document.cookie.substring(c_start, c_end));
        }
    }
    return "";
}

As a key in Query string

Ex:

http://www.example.com?myKey=myVal

i can understand sir but i don't know javascript. what can i do sir — , Sep 12 '15 at 06:14

score 0 · Answer 3 · answered Sep 12 '15 at 06:16

If I understand correctly, you want to pass values that a user selects in one page to another page. I would recommend you to pass your values using key value pairs in the URL. JavaScript has neat way of doing it. For example :

var month = "July" var date = "1" var URL = "yourpage.aspx?month="+month+"&date="+date location.href=URL

By this, the URL will look something like this youpage.aspx?month=July&date=1 The parameters in the URL start after the question mark "?" and the key value pairs are separated by "&". location.href will redirect your page to that URL. and then you can read these parameters using .net on the server side. I hope this helps.

how to pass value one page to another page using html

3 Answers3

Linked