Multiply select by radiobutton

Navigation
2

We have a radio button with three different values and a select box with several different values, how could I multiply the radiobutton checked with the value of the select box and put the result in a field?

Radio button code: 

 <input required="required" value="1" name="diarias" id="diaria1"  type="radio"><label
  for="diaria">Uma diaria</label>
<input required="required"  value="2" name="diarias" id="diaria2" type="radio"><label
  for="diaria">Duas diarias</label>
<input required="required"  value="3" name="diarias" id="diaria3" type="radio"><label
  for="diaria">Três diarias</label><br>

Select box code: 

<select name="cidade" id="cidade" onclick="calcularopcoes();">
            <option name="nenhum" value=""> Escolher </option>
            <option name="saopaulo" value="244.00"> São Paulo </option>
            <option name="fortaleza" value="412.80"> Fortaleza </option>
            <option name="Blumenau" value="412.80"> Blumenau </option>
            <option name="riopreto" value="400.90"> Rio Preto </option>
            </select>

And the Javascript I tried to do but it did not work. 

  '<script type="text/javascript">
            function calcularopcoes(){if(document.getElementById("ajudacusto").value.length < 0){
                    alert('Por favor, deve se        escolher uma opção');
                    document.getElementById("ajudacusto").focus();
                    return false
                    }
                if(document.getElementByName("diarias").value.length < 0){
                    alert('Por favor, deve se escolher uma opção');
                    document.getElementByName("diarias").focus();
                    return false
                    }


                // vamos obter o elemento select
            var elem = document.getElementById("cidade");    
            var elem2 = document.getElementByName("diarias");
            var selecionou = elem.options[elem.options.selectedIndex]*1 * elem2.options[elem2.options.selectedIndex]*1;
            // passa opção selecionada para campo
            document.getElementById("ajudacusto").value = selecionou.value;
    }  
   </script>'

What better way can we do? That the user click on the daily and choose the city he / she calculates of multiplication automatically and deposits in the field?

    
asked by anonymous 29.03.2014 / 20:34

2 answers

1

Vinicius, here is a suggestion: 

window.onload = function () {
    var inputs = document.querySelectorAll("[name=diarias], select");
    for (var i = 0; i < inputs.length; i++) {
        inputs[i].addEventListener('click', calcularopcoes);
    }
}

function calcularopcoes() {
    var diarias = document.querySelectorAll("[name=diarias]"); // pegar em todas as checkbox
    var escolhida = false; // criar uma flag
    for (var i = 0; i < diarias.length; i++) { // percorre-las uma a uma
        if (diarias[i].checked) escolhida = diarias[i]; // se alguma estiver escolhida a flag passa a "true"
    }
    if (!escolhida) { // se nenhuma estiver escolhida lançar o alert
        alert('Por favor, deve se escolher uma opção');
        document.querySelector("[name=diarias]").focus();
        return false
    }


    // vamos obter o elemento select
    var elem = document.getElementById("cidade");
    var selecionou = elem.options[elem.options.selectedIndex].value;
    // passa opção selecionada para campo
    var valorFinal = selecionou * escolhida.value; // escolhida está em cache, é só ir buscar o valor (.value)
    document.getElementById("ajudacusto").value = valorFinal ;
}

Example

Another example, with jQuery: link
Another example, with MooTools: link

In the first part next to each checkbox and select an event listener to run its function with each click (so you can get onclick of your HTML)

    
29.03.2014 / 20:51
2

You have some problems with your code:

  • document.getElementByName does not exist. As your own code demonstrates, there may be more than one element with the same name. Replace the test with getElementsByName (elements, in the plural): 

    var diarias = document.getElementsByName("diarias");
for ( var i = 0 ; i < diarias.length ; i++ ) { ... }

  • To see if a radio button is selected, use the checked : 

    var selecionado = null;
var diarias = document.getElementsByName("diarias");
for ( var i = 0 ; i < diarias.length ; i++ )
    if ( diarias[i].checked )
        selecionado = diarias[i];
if(!selecionado){
    alert('Por favor, deve se escolher uma opção');
    ...
}

  • You're trying to multiply elements instead of multiplying their values: 

    var selecionou = elem.options[elem.options.selectedIndex]*1 * elem2.options[elem2.options.selectedIndex]*1;

    Use the values instead (using the variable selecionado created earlier): 

     var elem2 = selecionado;
var selecionou = elem.options[elem.options.selectedIndex].value * elem2.value;
// passa opção selecionada para campo
document.getElementById("ajudacusto").value = selecionou;

    • Example in jsFiddle .

    P.S. Are you using floating point to represent money? This is not a good idea, see what happens when you choose "three nights in Rio Preto". These rounding errors can be "hidden" by using the toFixed function in the value (causes it to print with a fixed number of decimal places), but you must also be careful about the rest of the code. 

    document.getElementById("ajudacusto").value = selecionou.toFixed(2);

    Updated example .

        
    29.03.2014 / 21:00
    CSS wallpaper Monitor service with Borland Socket Server