Grab content from div, a, select

Question

I have a problem implementing this simulation, is the following, the user chooses the package by clicking on one of these boxes (monthly, quarterly, semi-annual or annual) then choose in select the number of points and wanted there to be the multiplication of these data showing in the last box where has the 306 via Javascript or using the Jquery library.

<!-- TIPO DE PLANO -->
<a href="" class="ico_planos">
    <div class="col-md-3">
        <header>
          <p>Mensal</p>
        </header>                       
        <section class="valor">
          <p><span>R$</span>170<span>,00</span></p>
        </section>
    </div>
</a>
<!-- QUANTIDADE QUE ESCOLHER -->
<select name="qntdPlayers" id="selectQntdPlayers">
    <option value="1">01 Ponto</option>
    <option value="3">03 Pontos</option>
    <option value="6">06 Pontos</option>
    <option value="9">09 Pontos</option>
    <option value="10">10 ou mais Pontos</option>
</select>

<!-- DENTRO DA DIV simulacaoValorTotal eu gostaria de mostrar o resultado da multiplicação de valor x value escolhido -->
<section class="praquem">
    <p><b style="color:#064e71">Valor do pacote</b></p>
    <p class="simulacaoValorTotal">R$ 306,00/mês</p> <!-- <- MOSTRAR AQUI O RESULTADO DE TIPO DE PACOTE X QUANTIDADE ESCOLHIDA (170X1 = 170) --> 
</section>

Answer 1

https://jsfiddle.net/v21p62t7/1/

basically, you have to do an event onchange in your select and a onclick in sections with the class valor; However, you should add one more data-attribute called data-plan-price with the (integer) value of the plan.

When clicked, it assigns to a "global" variable called keep. When the onchange of select fires, it simply picks up that value that is in the keep and multiplies by its own value, format the number, and exchange the innerText of the element .simulacaoValorTotal

---

var keep = {};

var formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'BRL',
  minimumFractionDigits: 2,
});

document.querySelector('#selectQntdPlayers').onchange = function (event) { 
    var totalPrice;
  var selectedModifier = parseInt(event.target.value,10);
  if (!keep.selectedPlan) return false;
  totalPrice = formatter.format(keep.selectedPlan * selectedModifier);
  document.querySelector('.simulacaoValorTotal').innerText = totalPrice + "/mês";
  console.log("R$ " + totalPrice + "/mês");
}

document.querySelector('.valor').onclick = function (event) {
    keep.selectedPlan = parseInt(this.getAttribute("data-plan-price"),10);
}

Answer 2

There are several ways to do what you want, I’ll leave here the form I find simpler.

Well, first of all, the person should have a chosen type of sport, so let’s leave the first item with the class selected, and according to the mode change, we will change the selected item. I believe that in your CSS already have something of the type, for better use of the site.

Then, we will take the value of the selected item and multiply it by the selected value in select. As the final result should change when changing the selected item, both in the mode, and in the select, create a function to do this.

Would look this way:

$('section.valor').click(function(){
		$('section.valor').removeClass( "selected" ); //Remove classe selected de todos
		$(this).addClass('selected'); //add classe selected ao item selecionado
		calculaValor(); //chama função para alterar o resultado
});

 $('#selectQntdPlayers').change(function(){
 		calculaValor(); //chama função para alterar o resultado
 })

function calculaValor(){
	var plano = $('section.selected').find('span').first().html(); //obtem o valor da modalidade selecionado
	var pontos = $('#selectQntdPlayers option:selected').val(); //obtem o valor do select
	var result = parseInt(plano) * parseInt(pontos); //multiplica os dois (convertendo para int antes)
	$('#simulacaoValorTotal').html('R$ ' + result + ',00/mês'); //exibe o resultado
}

section.selected{
  color: gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-md-3">
<a href="javascript:void(0);" class="ico_planos">
    <div class="col-md-3 col-sm-3">
        <header>
          <p>Mensal</p>
        </header>                       
        <section class="valor selected">
            <p>R$ <span>170,00</span></p>
        </section>
    </div>
</a>
</div>
<div class="col-md-3">
<a href="javascript:void(0);" class="ico_planos">
    <div class="col-md-3 col-sm-3">
        <header>
          <p>Trimestral</p>
        </header>                       
        <section class="valor">
          <p>R$ <span>150,00</span></p>
        </section>
    </div>
</a>
</div>
<div class="col-md-3">
<a href="javascript:void(0);" class="ico_planos">
    <div class="col-md-3 col-sm-3">
        <header>
          <p>Semestral</p>
        </header>                       
        <section class="valor">
          <p>R$ <span>130,00</span></p>
        </section>
    </div>
</a>
</div>
</div>

<!-- QUANTIDADE QUE ESCOLHER -->
<select name="qntdPlayers" id="selectQntdPlayers">
    <option value="1">01 Ponto</option>
    <option value="3">03 Pontos</option>
    <option value="6">06 Pontos</option>
    <option value="9">09 Pontos</option>
    <option value="10">10 ou mais Pontos</option>
</select>

<!-- DENTRO DA DIV simulacaoValorTotal eu gostaria de mostrar o resultado da multiplicação de valor x value escolhido -->
<section class="praquem">
    <p><b style="color:#064e71">Valor do pacote</b></p>
    <p class="simulacaoValorTotal" id="simulacaoValorTotal">R$ 306,00/mês</p> <!-- <- MOSTRAR AQUI O RESULTADO DE TIPO DE PACOTE X QUANTIDADE ESCOLHIDA (170X1 = 170) --> 
</section>

Example in Jsfiddle.

Answer 3

A simple and functional option.

HTML

    <script
    src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
    integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
    crossorigin="anonymous"></script>

    <!-- TIPO DE PLANO -->
    <a href="#" class="ico_planos selected" data-val="170">
    <div class="col-md-3">
        <header>
          <p>Mensal</p>
        </header>                       
        <section class="valor">
          <p><span>R$</span>170<span>,00</span></p>
        </section>
    </div>
    </a>
    <a href="#" class="ico_planos selected" data-val="350">
    <div class="col-md-3">
        <header>
          <p>Bimestral</p>
        </header>                       
        <section class="valor">
          <p><span>R$</span>350<span>,00</span></p>
        </section>
    </div>
    </a>
    <!-- QUANTIDADE QUE ESCOLHER -->
    <select name="qntdPlayers" id="selectQntdPlayers">
    <option value="1">01 Ponto</option>
    <option value="3">03 Pontos</option>
    <option value="6">06 Pontos</option>
    <option value="9">09 Pontos</option>
    <option value="10">10 ou mais Pontos</option>
    </select>

    <!-- DENTRO DA DIV simulacaoValorTotal eu gostaria de mostrar o resultado da multiplicação de valor x value escolhido -->
    <section class="praquem">
    <p><b style="color:#064e71">Valor do pacote</b></p>
    <p class="simulacaoValorTotal">R$ 306,00/mês</p> <!-- <- MOSTRAR AQUI O RESULTADO DE TIPO DE PACOTE X QUANTIDADE ESCOLHIDA (170X1 = 170) --> 
    </section>

Javascript

    function calc(){
        var plano = parseInt($('.selected').data('val'), 10);
      var ponto = parseInt($('#selectQntdPlayers').val(), 10);
      console.log(plano);
      $('p.simulacaoValorTotal').html('R$ '+plano*ponto+',00');
    }

    $(document).ready(function(){
        $('.ico_planos').click(function(){
        $('.ico_planos.selected').removeClass('selected');
        $(this).addClass('selected');
        calc();
      })
      $('#selectQntdPlayers').change(function(){
        calc();
      })
    })

Example: https://jsfiddle.net/tfh4ed4s/1/