How to send a data from one html page to another using javascript

Question

Sorry If my question is duplicate, I couldn't find anything similar. I'm trying to send my values from one HTML to another HTML using local storage, my HTML1 page contains grocery items when I select and click next button the items are stored in a final variable it has to be sent to another HTML2 page i.e. the billing 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);
     });

Why don't you just send the information to the backend and send the information to all the other pages using websockets? — nick zoum, Nov 04 '19 at 08:37
It seems you have a working code for the task, what is your actual question? — Teemu, Nov 04 '19 at 08:40
I think you might not have included your JS code in all pages.. — Narkhede Tushar, Nov 04 '19 at 08:41
@nickzoum Maybe, but we're not supposed to speculate what the question might be, OP has to ask something ... — Teemu, Nov 04 '19 at 08:41
I don't have any errors but this code is not working I could not find what is wrong — Sushmitha Kumaravel, Nov 04 '19 at 08:52
@SushmithaKumaravel where are you putting this jquery code on which page ? — Shreyan Mehta, Nov 04 '19 at 08:55

score 1 · Answer 1 · answered Nov 04 '19 at 08:54

1

Your JavaScript code has to be on the 2 different pages. On the first page you put the value in the local storage. On the second page you extract the value from the local storage. What you are trying to do in your example is to access the element with id blackriceqty with the JS code on the first page, but this element is on the second page - hence missing in the current DOM.

JavaScript code on 1st HTML page:

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

JavaScript code on 2nd HTML page:

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

There are also other ways to pass values between pages as other comments says: go to the backend, use query strings, cookies, local or session storage, web sockets...

answered Nov 04 '19 at 08:54

antanta

618
8
16

Thank you so much, but can I do this in external js page? – Sushmitha Kumaravel Nov 04 '19 at 08:55
yes you just need to call its method and export method from there, but you will get the jqyuery level events on that particular page – Shreyan Mehta Nov 04 '19 at 08:56
@SushmithaKumaravel you can upvote if that helped thanks – Shreyan Mehta Nov 04 '19 at 09:07
do you mean the GET/POST methods? @ShreyanMehta – Sushmitha Kumaravel Nov 04 '19 at 09:09

How to send a data from one html page to another using javascript

1 Answers1