时间戳

首页 > 解决方案 > 如何使用javascript将数据从一个html页面发送到另一个页面

javascript - 如何使用javascript将数据从一个html页面发送到另一个页面

问题描述

对不起，如果我的问题是重复的，我找不到类似的东西。我正在尝试使用本地存储将我的值从一个 HTML 发送到另一个 HTML，当我选择并单击下一步按钮时，我的 HTML1 页面包含杂货项目，这些项目存储在最终变量中，它必须发送到另一个 HTML2 页面，即计费会话

//Htmlpage1 want to send the radio button details to html2page
        <form class="mt-5"> 
            <div class="row mt-5">
                <div class="col-sm-4">
                  <bold><p>Black Rice</p></bold>
                    <input type="radio" name='item1' value='1 KG @ Rs.199' data-id="blackrice1kg" />1 KG @ Rs.199<br>
                    <input type="radio" name='item1' value='2 KG @ Rs.390' data-id="blackrice2kg" />2 KG @ Rs.390<br>
                    <input type="radio" name='item1' value='3 KG @ Rs.550' data-id="blackrice3kg" />3 KG @ Rs.550<br>
                </div>
                <div class="col-sm-4">
                        <img src="img/Taruproduct.png" alt="">
                    <bold><p>JaggeryPowder</p></bold>
                    <input type="radio" name='item1' value='100 Sachets @ Rs.199' data-id="JaggeryPowder1kg" />100 Sachets @ Rs.199<br>
                    <input type="radio" name='item1' value='200 Sachets @ Rs.390' data-id="JaggeryPowder2kg" />200 Sachets @ Rs.390<br>
                    <input type="radio" name='item1' value='300 Sachets @ Rs.550' data-id="JaggeryPowder3kg" />300 Sachets @ Rs.550<br>
                </div>

 //html2 page 
    <div class="container text-center">
           <h5 class="display-2 mt-5 mb-5">Subscription Box</h5>  
           <form>
           <div class="form-group">
           <p>Black Rice <input type="text" id="blackriceqty"  class="form- 
             control"></p>   
           <form>     
    </div>

//javascript code
 $(document).ready(function () {
   $("input[type='radio']").click(function(){
      var final = $("input[name='item1']:checked").val();
      $(".result").val(final);
      localStorage.setItem(textValue,final);
      document.getElementById("blackriceqty").innerHTML=localStorage.getItem(textValue);
     });

标签： javascript

解决方案

您的 JavaScript 代码必须位于 2 个不同的页面上。在第一页上，您将值放在本地存储中。在第二页上，您从本地存储中提取值。您在示例中尝试做的是blackriceqty在第一页上使用 JS 代码访问具有 id 的元素，但该元素在第二页上 - 因此在当前 DOM 中丢失。

第一个 HTML 页面上的 JavaScript 代码：

 $(document).ready(function () {
   $("input[type='radio']").click(function(){
      var final = $("input[name='item1']:checked").val();
      $(".result").val(final);
      localStorage.setItem(textValue,final);
     });

第二个 HTML 页面上的 JavaScript 代码：

$(document).ready(function () {
document.getElementById("blackriceqty").innerHTML=localStorage.getItem(textValue);
});

正如其他评论所说，还有其他方法可以在页面之间传递值：转到后端，使用查询字符串，cookie，本地或会话存储，网络套接字......

推荐阅读