Q: choose two select and display result

1

So, guys, I'm new to the site and I'm in desperate need of help. I'm creating a site where the person selects home city and destination city So, okay, I want it when the person selects these two options and clicks on the value of the ticket, show a value, but I hit pakas head trying to make the javascript for it, if anyone can help, I'm very grateful

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

    
asked by anonymous 01.03.2017 / 00:57

3 answers

3

There is a solution that I think can answer you, I only did it with 2 values, but you can do it with others, if you want to do all this dynamically, you can let me know that I can help you!

I did it in the jsfiddle, but also if I clicked below in the Run I think it will appear for you ...

link

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>
    
01.03.2017 / 02:07
0

Starting with the form, which you should already have, I'll just give you an example of how to get the data of selects with jQuery , remembering that in the example I'm going to use an event of submit of form , but you can create a standalone function to retrieve values.

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

Here is the excerpt of jQuery where the values are retrieved:

    $(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 complete in 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>
    
01.03.2017 / 01:32
0

First of all, I recommend you read this article here . For lack of knowledge of javascript.

Your JS code has syntax errors:

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

The correct thing is this:

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

See working in JSFIDDLE: link

    
01.03.2017 / 02:19