如何使用html将值传递到另一个页面

时间:2015-09-12 05:53:54

标签: javascript jquery html asp.net

您好我有一个用javascript创建的定价表,我需要知道的是如何使用javascript点击按钮将第1行或第2行中的值传递到aspx页面

这是我的代码:

 <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>

版:

<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>

我想如果我点击立即购买按钮,价值就转到另一页。我的意思是结算选项页面

先生,请帮帮我

我不知道如何使用javascript。

更新代码:

源代码:

<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>

目的地代码:

<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>

我的代码有问题:

3 个答案:

答案 0 :(得分:2)

请根据您的要求尝试此代码:

来源页面

<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>

目标网页

<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>

答案 1 :(得分:1)

  

您有多种选择:

  1. 的sessionStorage
  2. 示例:

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

    1. localStorage的
    2. 示例:

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

      1. <强>缓存
      2. 示例: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 "";
        }
        
        1. 作为查询字符串中的键
        2. 例如:

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

答案 2 :(得分:0)

如果我理解正确,您希望将用户在一个页面中选择的值传递到另一个页面。我建议您使用URL中的键值对传递值。 JavaScript有很好的方法。例如:

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

这样,网址就会显示为youpage.aspx?month=July&date=1 URL中的参数在问号&#34;?&#34;之后开始。并且键值对由&#34;&amp;&#34;分隔。 location.href会将您的网页重定向到该网址。然后你可以在服务器端使用.net读取这些参数。我希望这会有所帮助。