Capture rel of each clicked link and add to the value of an Hidden input

Asked

Viewed 86 times

1

I have the following structure, I need to create something "similar" to a shopping cart. When creating a link I need to take the rel of this link and go adding the value of the Hidden input,but I do not want to repeat values, example: If I clicked on Product 1, Product 4 link and clicked on Product 4 again, then I want the value of the Hidden input to receive the values

"product 1,product 4"

the structure of the page is this:

<!DOCTYPE html>
<html>
<head>
  <title>Produtos</title>
</head>
<body>

  <div class="produtos">

    <a href="#" rel="produto1">Produto 1</a>
    <a href="#" rel="produto2">Produto 2</a>
    <a href="#" rel="produto3">Produto 3</a>
    <a href="#" rel="produto4">Produto 4</a>
    <a href="#" rel="produto5">Produto 5</a>

    <!-- esse input recebe o rel de cada link clicado -->
    <form method="post">
      <input type="hidden" value="">
    </form>

  </div>

</body>
</html>
javascript html jquery

1 answer

2


First you can put one id in the input Hidden so you can identify it better and send the values.

<input id="produtos" type="hidden" value="">
              ↑

Then you can create an event click to take the values of the links, insert into an array and play for the input in string form (other explanations in the code itself):

I switched the Hidden for text only as an example to display the values.

$(function(){
   
   var prods = []; // array para guardar os valores clicados
   // evento "click" nos links
   $(".produtos a").click(function(e){
      
      e.preventDefault(); // cancela o evento do link
      var p = $(this).attr("rel"); // pega o valor do atributo "rel" do link clicado
      // verifica se o valor já existe na array.
      // se não existe, adiciona com "push"
      // se exite, remove "splice"
      var indice = prods.indexOf(p);
      if(indice < 0) {
  	    prods.push(p);
      } else {
  	    prods.splice(indice, 1);
      }
      // converte a array em string com os valores separados por vírgula
      // e insere no input
      $("#produtos").val(prods.join(","));
      
   });
   
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="produtos">

    <a href="#" rel="produto1">Produto 1</a>
    <a href="#" rel="produto2">Produto 2</a>
    <a href="#" rel="produto3">Produto 3</a>
    <a href="#" rel="produto4">Produto 4</a>
    <a href="#" rel="produto5">Produto 5</a>

    <!-- esse input recebe o rel de cada link clicado -->
    <form method="post">
      <input id="produtos" type="text" value="" style="width: 500px;">
    </form>

</div>

  • Thanks friend, helped a lot!

  • You’re welcome...

  • Without wanting to abuse your goodwill, but could you please let me know how I would remove the value of the value if I click on a link that already has this result in the array? basically it’s like this: clicou added, clicked removed again. I’m studying JS but haven’t gotten into these more advanced classes yet

  • I moved a change to remove if it already exists.

  • Ah, cool... already done... thanks!

Browser other questions tagged javascript html jquery

You are not signed in. Login or sign up in order to post.