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

标签 javascript

<分区>

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

//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 代码必须在 2 个不同的页面上。在第一页上,您将值放在本地存储中。在第二页上,您从本地存储中提取值。您在示例中尝试做的是使用第一页上的 JS 代码访问 ID 为 blackriceqty 的元素,但该元素位于第二页上 - 因此在当前 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、本地或 session 存储、网络套接字......

关于javascript - 如何使用javascript将数据从一个html页面发送到另一个,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58689666/

相关文章:

javascript - 基于提取值的imacros javascript循环

javascript - Accordion 下拉菜单不适用于手机/平板电脑

javascript - 如果未选中一组其他复选框,则自动选中一个复选框

JavaScript 问题

Javascript Canvas 游戏重置错误,绘制失败

javascript - react 路由器状态?

javascript - 编写书签的最佳做法是什么

javascript - d3.js v4 缩放到图表中心(不是鼠标位置!!)

javascript - 自引用类

javascript - 尝试在不使用其他算法的情况下使用递归来解决