Get radio button value via jQuery and set in an input text

Question

Good evening, I am with a Radiogroup that return me three values: PM - Lower Weight (The lowest weight between Outgoing Weight and Finish Weight); PS - Output Weight; PC - Arrival Weight;

The system must take the value of the field Pptdriver and then perform the calculation by multiplying by the parameter selected above and dividing the result by a thousand for ai yes display in the Driver Freight field.

            <div class="row">
        <div class="small-2 large-4 columns">
            <label>PPT Motorista</label>
            <input type="number" placeholder="170,00" name="PptMotorista" id="PptMotorista"/>
        </div>
        <div class="small-2 large-4 columns end">
            <label>Frete Motorista</label>
            <input type="number" name="FreteMotorista" id="FreteMotorista" readonly="readonly" tabindex="-1"/>
        </div>
    </div>

    <div class="row">
        <fieldset class="large-6 medium-6 columns">
            <legend>Cálculo do Frete</legend>
            <input type="radio" name="calculoFrete" value="PM" id="menorpeso" required checked><label for="menorPeso">Menor Peso</label>
            <input type="radio" name="calculoFrete" value="PS" id="pesosaida"><label for="pesoSaida">Peso de Saída</label>
            <input type="radio" name="calculoFrete" value="PC" id="pesochegada"><label for="pesoChegada">Peso de Chegada</label>
        </fieldset>
    </div>

<script type="text/javascript">
    var bPptMotorista   = document.getElementById( 'PptMotorista' );
    var bFreteMotorista = document.getElementById( 'FreteMotorista' );
    var bTipoPeso;
    var bRadioGroupPeso = '';

    $(document).ready(function(){
        $("*[name='calculoFrete']").change(function(){
            bRadioGroupPeso = ($(this).attr('value'));
        });
    });;

    if (bRadioGroupPeso == 'PS'){
        bTipoPeso = document.getElementById('PesoSaida');
    } else if (bRadioGroupPeso == 'PC') {
        bTipoPeso = document.getElementById('PesoChegada');
    } else {
        bTipoPeso = document.getElementById('PesoChegada') - document.getElementById( 'PesoTotal' );
    }

    bPptMotorista.onkeyup=calcula_frete;
    bTipoPeso.change=calcula_frete;

    function calcula_frete() {
        bFreteMotorista.value = ((bTipoPeso.value / 1000) * bPptMotorista.value);
    }
</script>
</body>

But the code I wrote, I don’t know why you’re not taking the values, performing the calculation and playing in the Text of Freight Driver. Someone can help me and check if the code has something incorrect. Thank you.

Answer 1

In your script you have two syntax errors in both conditional if, in Javascript you must put the condition in parentheses, after the word if.

Change to:

if (bRadioGroupPeso == 'PS') {
    bTipoPeso = document.getElementById('PesoSaida');
} else if (bRadioGroupPeso == 'PC') {
    bTipoPeso = document.getElementById('PesoChegada');
} else {
    bTipoPeso = (aPesoChegada.value - aPesoTotal.value);
}

You also need to declare variables var aPesoChegada and aPesoTotal.

Answer 2

I will not perform the logic for Voce just pass you the basics to solve, Oce is mixing the concepts of jQuery and javascript, to facilitate declared as much as possible in jQuery.

Example:

var pptMotorista = $("#PptMotorista");  // Salva os seletores em variaveis
var freteMotorista = $("#FreteMotorista");

$("input[name=calculoFrete]").change(function() { // na mudanca do radio button
  var freteResultado = pptMotorista.val(); // Pega o valor do pptMotorista.
  if (this.value === 'PM') { // realiza o calculo se o valor do radio button for PM

  } else if (this.value === 'PS') { // idem mas se for PS

  } else if (this.value === 'PC') { // idem mas se for PC

  }
  freteMotorista.val(freteResultado); // Mostra no campo freteMorotista o resultado do calculo
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="small-2 large-4 columns">
    <label>PPT Motorista</label>
    <input type="number" placeholder="170,00" name="PptMotorista" id="PptMotorista" />
  </div>
  <div class="small-2 large-4 columns end">
    <label>Frete Motorista</label>
    <input type="number" name="FreteMotorista" id="FreteMotorista" readonly="readonly" tabindex="-1" />
  </div>
</div>

<div class="row">
  <fieldset class="large-6 medium-6 columns">
    <legend>Cálculo do Frete</legend>
    <input type="radio" name="calculoFrete" value="PM" id="menorpeso" required checked>
    <label for="menorPeso">Menor Peso</label>
    <input type="radio" name="calculoFrete" value="PS" id="pesosaida">
    <label for="pesoSaida">Peso de Saída</label>
    <input type="radio" name="calculoFrete" value="PC" id="pesochegada">
    <label for="pesoChegada">Peso de Chegada</label>
  </fieldset>
</div>

See the same example on jsfiddle

I recommend reading the basics of jquery http://api.jquery.com/