Capture rel of each clicked link and go adding in the value of an input hidden

Question

Capture rel of each clicked link and go adding in the value of an input hidden

Navigation

#1 by (2 votes)

1

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

"product1, product4"

the page structure 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

asked by anonymous 29.08.2018 / 20:39

1 answer

Get Bank ID to load in HTML select Turn chr into team in R

score 2 · Accepted Answer

First you can put a id into the hidden input so you can identify it better and send the values.

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

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

I changed hidden by text only as an example to see 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><divclass="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>