Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by nicholas maddren
nicholas maddren
12,793 Points

Using WebStorage API to store value of an <a> tag

Hello guys I am having an issue working on a family project and I am wondering if anybody could help?

So basically I have this listings page of vehicles: http://drivencarsales.co.uk/used-cars.html

If you press that link that says "Book Test Drive" you will be taken to another page that displays a form.

As you can see on that form there is a Vehicle Registration field.

So you will notice that the A tag on the product listings page has a value:

<a href="/book-testdrive" class="addtocart" data-value="NH06LKO" title="Book Test Drive"><i class="glyphicon glyphicon-road"></i><span>&nbsp;Book Test Drive</span></a>

I would like to use javascript to take this value and place it in the vehicle registration field of the form that it links to.

Obviously I'll need to store the value into a variable and then print it into the field however I have no idea how I can store the value from the A tag when the page loads?

Every time the user clicks the Book Test Drive A tag I would like the variable to be replaced with the latest element value.

I have been told WebStorage API is the best bet however I have no clue how to do this.

Can someone possibly show me an example?

Just bare in mind I am a complete noob with JavaScript.

Thanks, Nick

Stefan Dietz
Stefan Dietz
2,360 Points

Why don't you add the value to the URL (i.e. /book-testdrive/NH06LKO)?
I think that's the cleaner way.

If you're sure you want to go the way you described, you could use localstorage. The API is really simple :)

nicholas maddren
nicholas maddren
12,793 Points

How could I add it to the URL though?

Thanks, Nick

Stefan Dietz
Stefan Dietz
2,360 Points

Just add it to the href attribute like you did it for the data-attribute.

The more important question is, how to change the routing and get the value from the URL on the form page. But that depends on the underlying backend...

nicholas maddren
nicholas maddren
12,793 Points

I'm using Magento so I'm pretty sure this would be quite a pain to pull off wouldnt it?

Stefan Dietz
Stefan Dietz
2,360 Points

I unfortunately don't know Magento or the Test Drive form extension.

But I would try to find a backend solution before hacking in the JavaScript workaround.

If you have access to the Test Drive form templates but not the routing you could try to pass the value using a URI query parameter (/book-testdrive/?vehicle_registration=NH06LKO) and put it in the template like so:

<input type="text" value="<?php echo isset($_GET['vehicle_registration']) ? htmlspecialchars($_GET['vehicle_registration']) : '' ?>">

1 Answer

LaVaughn Haynes
LaVaughn Haynes
12,397 Points
LaVaughn Haynes
LaVaughn Haynes
12,397 Points

Here is an example of using localStorage. It's not complicated but note that it doesn't work in some older browsers. You could also append the value to the URL as a hash and then read it with javaScript: 

<a href="/book-testdrive#NH06LKO">Add to Cart</a>

Anyway, more info about storage is below:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Storage</title>
</head>
<body>
  <ul>
    <li>
      <a href="#" class="addtocart" data-value="HONDA" title="Book Test Drive">
        Honda
      </a>
    </li>
    <li>
      <a href="#" class="addtocart" data-value="TOYOTA" title="Book Test Drive">
        Toyota
      </a>
    </li>
    <li>
      <a href="#" class="addtocart" data-value="FORD" title="Book Test Drive">
        Ford
      </a>
    </li>
  </ul>

  <input type="text" class="registration">

  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script>
    /*
    *----------------------------------------
    *http://caniuse.com/#search=localstorage
    *----------------------------------------
    *local storage
    *https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
    *----------------------------------------
    */

    //when add to cart link is clicked...
    $('.addtocart').on('click', function(){

      //get the value of the "data-value" attribute for that link
      var vehicleRegistration = $(this).data('value');
      //save it to localStorage
      localStorage.setItem('vehicleRegistration', vehicleRegistration);


      //read from localStorage
      if( localStorage.getItem('vehicleRegistration') ){
        //add the value to the form input
        $('.registration').val( localStorage.getItem('vehicleRegistration') );
      }

    });

  </script>
</body>
</html>