When a link is clicked, I want to show a value/price on the next page

Question

I have this code on page 1. All a tags have the same link. If the user clicks on one link, the next page 2 is loaded. I want to display the price of that id specific to that link to show on page 2.

example: If the user clicks a link with id="saloon_price", the price on page 2 should appear Saloon: £50. If the user clicks the link with id="mpv_price", the price on page 2 should appear MPV: £70. Please help me to achieve this on page 2.

I am very new to coding. And using Javascript. Kindly help me with a simpler solution. Thanks

<a id="saloon_price" href="/quotes/details"> Saloon: £50</a> 
<a id="estate_price" href="/quotes/details">Estate: £60</a>
<a id="mpv_price" href="/quotes/details">MPV: £70</a>

Answer 1

You will propably need to use PHP or other server-side languages. You can do this easily with forms. But you will need to run this on some kind of server.

This will echo (type to document) the value of value attribute on the button...

index.php:

<form action="/quotes/details.php" method="post">
  <button type="submit" name="price" value="£50" id="saloon_price"> Saloon: £50 </button>
  ...other buttons...
</form>

/quotes/details.php:

...
<?php
  $price = $_POST["price"];
  echo "MPV: " . $price;
?>
...

You can use method="get" and $_GET["price"] if you want to see these values in url.

Answer 2

In the web, we pass values mainly using the URL, and read them again in the loaded page.

<a id="saloon_price" href="/quotes/details?label=Saloon&value=£50"> Saloon: £50</a> 
<a id="estate_price" href="/quotes/details?label=Estate&value=£60">Estate: £60</a>
<a id="mpv_price" href="/quotes/details?label=MPV&value=£70">MPV: £70</a>

And read this post for more details: How to get the value from the GET parameters?