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

Question

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

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

Good evening, I'm with a RadioGroup that gives me three values: PM - Less Weight (The lower weight between the Outgoing Weight and Arrival Weight); PS - Output Weight; PC - Arrival Weight;

The system must take the value of the PptMotorista field and then perform the calculation by multiplying by the parameter selected above and dividing the result by a thousand so that it is displayed in the Freight Driver 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 do not know why you are not picking up the values, performing the calculation and playing in the Text of the Freight Driver. Can someone help me and check if the code has anything incorrect. Thank you.

javascript jquery

asked by anonymous 22.03.2016 / 00:17

2 answers

How to Connect to the Bank Reading INI File (Function and Class) Session variables $ _SESSION vs class variables in PHP

score 1 · Answer 1

In your script you have two syntax errors in the two conditionals if , in JavaScript you should put the condition in parentheses after the word if .

Switch 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 .

score 0 · Answer 2

I'm not going to do the logic for you, I'm just going to give you the basics to solve, you're mixing the jQuery and javascript concepts, to facilitate I'll declare 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><divclass="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 in jsfiddle

I recommend reading the basics of jquery link