0

Here I try to send data from one page to another HTML page. I tried with the window.load method and localStorage but unable to get the output. I have a table with title and button when click on button current row title will be displayed in the b.html page. Can anyone suggest me in the right direction.

a.html

<body>
 <table class="at-items-block">
  <thead></thead>
   <tbody>
          <tr>
          <td class="at-int-sn">
        <h2 class="at-IntHdr">test</h2>
        <ul>
            <li><b>bbb</b> bbb</li>
            <li><b>bb</b> bb</li>
        </ul>
    </td>
    <td class="at-int-dl1">
        <h2>6.2<span class="time-sep">hrs</span></h2>
        <span class="todownload">to download*</span>
    </td>
    <td class="at-int-dl2">
        <h2>55<span class="time-sep">min</span></h2>
        <span class="todownload">to download*</span>
    </td>
    <td class="at-int-dl3">
        <h2 class="at-IntHdr">11<span class="time-sep">min</span></h2>
        <span class="todownload">to download*</span>
    </td>
    <td class="at-int-price">
        <h2 class="atr"><span>$</span>1444<span class="per-month"> per mon*</span></h2>
        <span class="check-info">text here<br>
        text here<br>
        text here</span>
    </td>
    <td class="at-item-btn"><a href="b.html" class="at-int-btn">send</a></td>

</tr>
<tr>
  <td class="at-item">
    <h2 class="at-title">Title2 Here</h2>
  </td>
  <td class="at-item-btn"><a href="b.html">send</a></td>
</tr>
 </tbody>
  </table>
 </body>
  <script>
   window.onload = function() {
   var getTitle = document.getElementsByClassName("at-title");
  localStorage.setItem("itemsTitle",getTitle);
}
</script>

b.html

<div class="titleFetch">
<div class="titleHere"></div>
<div class="check-info"></div>
</div>
  </body>
 <script>
  window.onload = document.getElementsByClassName("titleFetch").innerHTML = 
  localStorage.getItem("itemsTitle");
  </script>
Husna
  • 1,286
  • 4
  • 19
  • 48
  • Does this answer your question? [Transfer data from one HTML file to another](https://stackoverflow.com/questions/17502071/transfer-data-from-one-html-file-to-another) – sanoj lawrence Feb 25 '20 at 07:35
  • `document.getElementsByClassName("at-title")` returns a HTMLCollection object. You've to get the first element in the collection, and read its `innerHTML` when setting the value to LocalStorage, and the same when you're setting `innerHTML` on the other page. See https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return . But Blackturtok's idea of passing the title in a querystring in the address is also very useful. – Teemu Feb 25 '20 at 08:02
  • @sanojlawrence In suggested url using get method fetching data but here I'm not using form my question is using div's how to fetch data – Husna Feb 25 '20 at 08:08
  • @Husna, Look at the answer below, It should solve your issue.. – Maniraj Murugan Feb 25 '20 at 08:25

2 Answers2

1

The JS which you have provided in index.html (first html) page will not do the things, you need to replace it with the following,

    window.onload = function() {

    const buttons = document.querySelectorAll('.at-item-btn');

    const passData = (getTitle) => {
        localStorage.setItem("itemsTitle",getTitle);
    }

    buttons.forEach((el,i) => {
        el.addEventListener('click', passData.bind(this, el.previousElementSibling.textContent))
    })

 }

Here you need to get all the buttons and need to make addEventListener() for each button and pass the respective title as parameter to the function and set it in localstorage setItem like,

const passData = (getTitle) => {
    localStorage.setItem("itemsTitle",getTitle);
}

Then in b.html, change the script to replace the received title like,

window.onload = function() {
    document.getElementsByClassName("titleFetch")[0].textContent =
    localStorage.getItem("itemsTitle");
}

Working example here

Maniraj Murugan
  • 8,868
  • 20
  • 67
  • 116
  • 1
    exactly what I want thanks for the clear explanation. – Husna Feb 25 '20 at 09:41
  • I have mutiple `td 's ` here only the last td data is coming. And only selected td i want to display using the class name. Can you suggest to me. – Husna Feb 25 '20 at 10:21
  • @Husna, I couldn't understand you.. Can you fork the example provided above and replicate how actual your table structure looks like and explain in clear about your exact requirement.. – Maniraj Murugan Feb 25 '20 at 10:23
  • I don't know whether this is what you are asking to find the nearest ```at-title``` of the clicked button.. You can replace the function declartion parameter like ```passData.bind(this, el.closest('tr').querySelector('.at-title').textContent``` .. http://plnkr.co/edit/gNZOxir75TiGgIZCJ6Gr?p=preview – Maniraj Murugan Feb 25 '20 at 10:36
  • i updated my question here i want to display `at-IntHdr` and `at-int-price` – Husna Feb 25 '20 at 10:45
  • @Husna, The above mentioned ```at-IntHdr``` is itself inside ```at-int-price``` and ```at-int-price``` doesn't have any text so what should you want in ```at-int-price```?? Really it is confusing for me.. On click of the send button what should you need to send to ```b.html```?? Give right appropriate answer.. – Maniraj Murugan Feb 25 '20 at 10:55
  • I want to display `at-IntHdr` and complete `at-int-price` td this two td's – Husna Feb 25 '20 at 11:01
  • @Husna, I could only find td's with class name ```at-int-price``` and the class ```at-IntHdr``` is given only for ```h2``` elements.. – Maniraj Murugan Feb 25 '20 at 11:04
  • Can we do like this `at-int-sn` nearest element. – Husna Feb 25 '20 at 11:13
  • @Husna, Do you need like this? http://plnkr.co/edit/HDs3mhtmphsmi3cPg3yk?p=preview – Maniraj Murugan Feb 25 '20 at 11:14
  • How to pass multiple classes here `querySelector('.at-IntHdr')` – Husna Feb 25 '20 at 11:24
  • @Husna, I have made a sample here http://plnkr.co/edit/1EPNRg7KwCEcuZ8FyjGn?p=preview based on the inputs given by you.. Displayed the ```$1444 per mon*```(from price td) and ```test```(from at-int-sn td).. And this is all I can do for now.. For further adjustments you need to understand the implementation and tweak it yourself and it is not a big deal if you understand.. Happy coding !!!.. – Maniraj Murugan Feb 25 '20 at 11:28
  • I appreciate your effort. – Husna Feb 25 '20 at 11:40
0

In my Opinion the best way would be the PHP-GET methods (example how to in PHP)

$var = $_GET['mode']
//to Use this you have to change your link, for example b.html?mode=YourString
//here you have the string right from the '='-character

alternatively if you want to use this method with JavaScript-Only you can use this method 

let endingString = "";
let workingString = window.location.href;
let boolpath = false;

for(var i = 0; i < workingString.length; i++)
{
    if (boolpath)
    {
        endingString += workingString[i];
    }
    else if (workingString[i] == '?') {
        boolpath = true;
    }        
}
//to Use this you have to change your link, for example b.html?hallo123
//here you have the complete string in the right of the '?'-mark
//b.html?hallo123 -> endingString="hallo123"

I personally recommend the JavaScript-aproach

Blackturtok
  • 16
  • 3