2

Temos um radio button com três valores diferentes e um select box com vários valores diferentes, como eu poderia fazer para multiplicar o radiobutton checado com o valor da select box e colocar o resultado em um campo?

Código do radiobutton:

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

Código do select box:

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

E o Javascript que eu tentei fazer mas não funcionou.

  `<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>`

De que melhor maneira podemos fazer? Que ao usuário clicar na diaria e escolher a cidade ele faça o calculo de multiplicação automaticamente e deposite no campo?

7
  • Falta algum HTML. Se puder junte também. QUer fazer isto com javascript puro ou é OK com uma biblioteca?
    – Sergio
    Commented 29/03/2014 às 19:38
  • Tudo isso em um formulário, como assim falta algum html? Pode ser com biblioteca sim.
    – Vinicius
    Commented 29/03/2014 às 19:51
  • possível duplicata de Mudar propriedades de radio button a partir de escolha em select
    – Jorge B.
    Commented 9/04/2014 às 16:03
  • @JorgeB. Acho que a outra questão deveria ser duplicada dessa, e não o contrário, pois: 1) Essa questão aqui foi criada antes; 2) Essa questão aqui tem uma resposta aceita, a outra não tem. PS: Eu nem li o conteúdo das duas, só fiz uma observarão caso sejam mesmo duplicadas.
    – Math
    Commented 9/04/2014 às 16:58
  • 1
    Cuidado com as perguntas camaleão.
    – Math
    Commented 9/04/2014 às 17:02

2 Respostas 2

2

Tem alguns problemas no seu código:

  1. document.getElementByName não existe. Como seu próprio código demonstra, podem existir mais de um elemento com o mesmo nome. Substitua o teste por getElementsByName (elements, no plural):

    var diarias = document.getElementsByName("diarias");
    for ( var i = 0 ; i < diarias.length ; i++ ) { ... }
    
  2. Para ver se um radio button está selecionado, use a propriedade 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');
        ...
    }
    
  3. Você está tentando multiplicar elementos em vez de multiplicar seus valores:

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

    Use os valores em vez disso (usando a varíável selecionado criada anteriormente):

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

Exemplo no jsFiddle.

P.S. Você está usando ponto flutuante para representar dinheiro? Isso não é uma boa ideia, veja o que acontece ao escolher "três diárias em Rio Preto". Esses erros de arredondamento podem ser "ocultados" usando a função toFixed no valor (faz com que ele se imprima com um número fixo de casas decimais), mas é preciso também ter cuidado com o restante do código.

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

Exemplo atualizado.

4
  • Boa resposta :) +1
    – Sergio
    Commented 29/03/2014 às 20:03
  • Acabei de perceber que não temos uma "pergunta canônica" sobre a forma de representar dinheiro em JavaScript... Abri uma nova pergunta quanto a isso
    – mgibsonbr
    Commented 29/03/2014 às 20:14
  • 1
    Interessante esse toFixed pois além de limitar a duas casas decimais (como é o dinheiro) fica esteticamente melhor pois se o resultado for 100 por exemplo ao invés de aparecer 100 ele mostra 100,00. O que me faz pensar em outra coisa, tenho um campo tipo float o usuário pode digitar o dinheiro tanto com ponto (que o banco de dados aceita) tanto com virgula (que o banco de dados não aceita e corta os centavos), tem alguma função em PHP ou JS pra tratar essa informação corretamente? Mas isso eu posso depois pesquisar/perguntar, mesmo assim, obrigado pois uma resposta completou a outra.
    – Vinicius
    Commented 29/03/2014 às 20:32
  • 2
    @Vinicius, pode lavar o dinheiro assim: function lavarDinheiro(valor){ return ('' + valor).replace(/,/g, '.')} hehe, isto é substituir virgular por pontos :) mgibsonr: boa pergunta nova que você lançou :)
    – Sergio
    Commented 29/03/2014 às 20:41
1

Vinicius, aqui fica uma sugestão:

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 ;
}

Exemplo

Outro exemplo, com jQuery: http://jsfiddle.net/LGpDT/3/
Outro exemplo, com MooTools: http://jsfiddle.net/LGpDT/4/

Na primeira parte junto a cada checkbox e select um event listener para correr a sua função a cada click ( assim pode tirar o onclick do seu HTML)

4
  • 1
    Bacana, o código ficou bem diferente do que eu pensava, juro que ainda não consigo me acostumar com javascript... Em todo caso, vou testar aqui já te respondo. Obrigado :) Esse javascript vai por ultimo ou vai na tag <head>?
    – Vinicius
    Commented 29/03/2014 às 19:58
  • @Vinicius, pode ir na tag head, se for no fim pode tirar o window.onload e deixar só o que está dentro
    – Sergio
    Commented 29/03/2014 às 20:00
  • 1
    Muito interessante esse querySelectorAll! Não costumo trabalhar com JavaScript puro, então não estou por dentro das facilidades que a API oferece.
    – mgibsonbr
    Commented 29/03/2014 às 20:17
  • 1
    Funcionou totalmente, ainda melhorando adicionei o toFixed() da resposta do @mgibsonbr para mostrar somente 2 casas depois da virgula. Muito Obrigado.
    – Vinicius
    Commented 29/03/2014 às 20:42

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .