1

Então galera, sou novo no site e tô precisando de uma ajuda urgentemente. Tô criando um site onde a pessoa seleciona cidade de origem e cidade de destino até ai tudo bem, eu quero que quando a pessoa selecionar essas duas opções e clicar no valor da passagem, mostre um valor, porém bati cabeça pakas tentando fazer o javascript pra isso, se alguém puder ajudar fico muito agradecido

<script>
    function passagem(){
        var sel_origem = document.getElementById("item1");
        var sel_destino = document.getElementById("item2");
        if (item1 = ori_poa & item2 = dest_fln){
            var resultado = 200;
        }
        else{
            resultado = 0;
        }       
    }
    alert("Valor da Passsagem: " + resultado)
    </script>

        <select name="origem" id="item1">
            <option value="sel_ori">Selecione a Cidade Origem</option>
            <option value="ori_poa">Porto Alegre</option>
            <option value="ori_fln">Florianópolis</option>
            <option value="ori_cwb">Curitiba</option>
            <option value="ori_gru">São Paulo</option>
            <option value="ori_sdu">Rio de Janeiro</option>
            <option value="ori_vix">Vitória</option>
            <option value="ori_bsb">Brasília</option>
            <option value="ori_cnf">Belo Horizonte</option>
            <option value="ori_gyn">Goiania</option>
            <option value="ori_for">Fortaleza</option>
            <option value="ori_mcz">Maceió</option>
            <option value="ori_mao">Manaus</option>
            <option value="ori_rec">Recife</option>
        </select>

        <select name="destino" id="item2">
            <option value="sel_dest">Selecione a Cidade Destino</option>
            <option value="dest_poa">Porto Alegre</option>
            <option value="dest_fln">Florianópolis</option>
            <option value="dest_cwb">Curitiba</option>
            <option value="dest_gru">São Paulo</option>
            <option value="dest_sdu">Rio de Janeiro</option>
            <option value="dest_vix">Vitória</option>
            <option value="dest_bsb">Brasília</option>
            <option value="dest_cnf">Belo Horizonte</option>
            <option value="dest_gyn">Goiania</option>
            <option value="dest_for">Fortaleza</option>
            <option value="dest_mcz">Maceió</option>
            <option value="dest_mao">Manaus</option>
            <option value="dest_rec">Recife</option>
        </select>

    </p>
    <p><input name="Enviar" type="submit" value="Valor Passagem" onclick="passagem()"/>
    </p>
    <p><input name="Limpar" type="reset" value="Limpar"/>

2
  • Porque não usa Jquery com evento de change ? Commented 1/03/2017 às 0:42
  • até faria, mas não tive aulas ainda que usa o JQuery e o trabalho é pra fazer no sublime ou notepad onde você faz o html/css e o javascript juntos Commented 1/03/2017 às 0:50

3 Respostas 3

4

Segue uma soluçao que acho que pode lhe atender, fiz apenas com 2 valores, mas assim podes fazer com os demais, se quiser fazer tudo isso dinamicamente, pode avisar que lhe ajudo!!

Fiz no jsfiddle, mas tambem se clicar ali abaixo no Executar acho que ele irá aparecer para voce...

https://jsfiddle.net/5na4p3ux/

function passagem(){
	var sel_origem = document.getElementById("item1").value;
  var sel_destino = document.getElementById("item2").value;

  if (sel_origem == "ori_poa" && sel_destino == "dest_fln"){
  	document.getElementById("valor-passagem").textContent = "Valor da Passagem: R$300,00"
    document.getElementById("valor-passagem").classList.remove("hide")
  } else if (sel_origem == "ori_poa" && sel_destino == "dest_fln") { 
  	document.getElementById("valor-passagem").textContent = "Valor da Passagem: R$200,00"
    document.getElementById("valor-passagem").classList.remove("hide")
  } else {
  	document.getElementById("valor-passagem").textContent = "Destino Inexistente"
  	document.getElementById("valor-passagem").classList.remove("hide")
  }
}

function limpar(){
	document.getElementById("valor-passagem").classList.add("hide")
  document.getElementById("item1").value = "sel_ori";
  document.getElementById("item2").value = "sel_dest";
}
.btns{
  width: 100%;
  text-align: center;
  margin-top: 10px;  
}

.selects{
  width: 100%;
  text-align: center;
}

#valor-passagem {
  margin-top: 20px;
  color: red;
  text-align: center;
  width: 100%;
}

.hide {
  display: none;
}
<div class="selects">
<select name="origem" id="item1">
  <option value="sel_ori">Selecione a Cidade Origem</option>
  <option value="ori_poa">Porto Alegre</option>
  <option value="ori_fln">Florianópolis</option>
</select>

<select name="destino" id="item2">
  <option value="sel_dest">Selecione a Cidade Destino</option>
  <option value="dest_poa">Porto Alegre</option>
  <option value="dest_fln">Florianópolis</option>
</select>

</div>

<div class="btns">
<input name="Enviar" type="submit" value="Valor Passagem" onclick="passagem()"/>
<input name="Limpar" type="reset" value="Limpar" onclick="limpar()"/>
</div>

<div>
<span id="valor-passagem" class="hide"> </span>
</div>
</div>

3
  • Ah desculpa, devia ter colocado o CSS do "valor-passagem" na div e como classe... mas tirando isso, ta aí! rsrs Commented 1/03/2017 às 1:09
  • valeu mano, ajudou muito, agradecido ;D Commented 1/03/2017 às 1:19
  • Opa, eu quem agradeço!!! Abraço! Commented 1/03/2017 às 1:29
1

Antes de tudo, recomendo você ler esse artigo aqui. Por falta de conhecimento de javascript.

Seu código JS está com erros de sintaxe:

function passagem(){
    var sel_origem = document.getElementById("item1");
    var sel_destino = document.getElementById("item2");
    if (item1 = ori_poa & item2 = dest_fln){
        var resultado = 200;
    }
    else{
        resultado = 0;
    }       
}

O correto é assim:

function passagem() {
  var _item1 = document.getElementById("item1");
  var item1 = _item1.options[_item1.selectedIndex].value;

  var _item2 = document.getElementById("item2");
  var item2 = _item2.options[_item2.selectedIndex].value;
  var resultado = 200;

  if(item1 == "ori_poa" && item2 == "dest_fln"){
  alert("200");
  //alert(resultado);
  }
  else{
  alert("0");
  }    
}

Veja funcionando em JSFIDDLE: https://jsfiddle.net/fNPvf/37053/

1
  • 1
    valeu mano, ajudou muito, deu pra tirar umas duvidas do primeiro que fiz! Commented 1/03/2017 às 1:38
0

Começando pelo formulário, que você já deve ter, só vou dar um exemplo de como pegar os dados dos selects com jQuery, lembrando que no exemplo vou usar um evento de submit do form, mas você pode criar uma função independente para resgatar os valores.

    <form>
        <select name="origem" id="item1">
            <option value="sel_ori">Selecione a Cidade Origem</option>
            <option value="ori_poa">Porto Alegre</option>
            <option value="ori_fln">Florianópolis</option>
            <option value="ori_cwb">Curitiba</option>
            <option value="ori_gru">São Paulo</option>
            <option value="ori_sdu">Rio de Janeiro</option>
            <option value="ori_vix">Vitória</option>
            <option value="ori_bsb">Brasília</option>
            <option value="ori_cnf">Belo Horizonte</option>
            <option value="ori_gyn">Goiania</option>
            <option value="ori_for">Fortaleza</option>
            <option value="ori_mcz">Maceió</option>
            <option value="ori_mao">Manaus</option>
            <option value="ori_rec">Recife</option>
        </select>

        <select name="destino" id="item2">
            <option value="sel_dest">Selecione a Cidade Destino</option>
            <option value="dest_poa">Porto Alegre</option>
            <option value="dest_fln">Florianópolis</option>
            <option value="dest_cwb">Curitiba</option>
            <option value="dest_gru">São Paulo</option>
            <option value="dest_sdu">Rio de Janeiro</option>
            <option value="dest_vix">Vitória</option>
            <option value="dest_bsb">Brasília</option>
            <option value="dest_cnf">Belo Horizonte</option>
            <option value="dest_gyn">Goiania</option>
            <option value="dest_for">Fortaleza</option>
            <option value="dest_mcz">Maceió</option>
            <option value="dest_mao">Manaus</option>
            <option value="dest_rec">Recife</option>
        </select>

        <p><input name="Enviar" onclick="javascript:passagem();" type="submit" value="Valor Passagem" /></p>
        <p><input name="Limpar" type="reset" value="Limpar"/></p>
    </form>

Aqui o trecho de jQuery onde são resgatados os valores:

    $(document).ready(function() {
        $( "form" ).submit(function(){ // equivalente a função passagem
            var origem = $('#item1').find('option:selected').val();
            var destino = $('#item2').find('option:selected').val();                                      
            if ((origem == 'ori_poa') && (destino == 'dest_fln')){
                resultado = 200;
            }else{
                resultado = 0;
            } 
            alert("Valor da Passsagem: " + resultado);
        });
    });

Function completa em javascript:

<script>
function passagem(){
    var o = document.getElementById("item1"); 
    var origem = o.options[o.selectedIndex].value; 
    var d = document.getElementById("item2"); 
    var destino = d.options[d.selectedIndex].value;
    if ((origem == 'ori_poa') && (destino == 'dest_fln')){
        resultado = 200;
    }else{
        resultado = 0;
    } 
    alert("Valor da Passsagem: " + resultado);
}
</script>
2
  • em teoria até entendi, mas é que não uso o JQuery, esse projeto que tô fazendo usa só o sublime ou notepad e ao fazer o próprio html você insere no html o java, era isso que tava tentando fazer queria que no lugar do JQuery, tivesse o código javascript, mas ae tem que mudar algumas coisas correto? Commented 1/03/2017 às 0:42
  • ao clicar valor passagem não aparece nada :( esse código entraria onde? no <javascript></javascript> ?? Commented 1/03/2017 às 1:07

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 .