Q: Choose two select and display result

Asked

Viewed 93 times

1

So, guys, I’m new to the site and I’m in urgent need of some help. I’m creating a site where the person selects origin city and destination city so far so good, I want that when the person select these two options and click on the value of the passage, show a value, but I bumped heads pakas trying to do the javascript for this, if anyone can help I am 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"/>

javascript html

  • Why not use Jquery with change event ?

  • I would, but I didn’t have classes yet using Jquery and the job is to do in the sublime or Notepad where you do html/css and javascript together

3 answers

4


Here’s a hiccup that I think you can take care of, I did it with only two values, but then you can do it with the others, if you want to do all this dynamically, you can let them know that I’ll help you!!

I did in jsfiddle, but also if I click there below in Run I think it will appear for 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>

  • Oh sorry, I should have put the CSS of the "pass-value" in the div and as class... but other than that, ta aí! rsrs

  • valeu mano, helped a lot, grateful ;D

  • Whoops, I thank you!!! Hug!

1

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

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 right thing to do:

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 on JSFIDDLE: https://jsfiddle.net/fNPvf/37053/

  • 1

    Thanks bro, it helped a lot, I could take some doubts of the first one I made!

0

Starting with the form, which you should already have, I’ll just give you an example of how to get the data from selects with jQuery, remembering that in the example I will use an event of submit of form, but you can create an independent function to redeem the 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 the excerpt from jQuery where the values are redeemed:

    $(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);
        });
    });

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

  • in theory I understood, but it is that I do not use Jquery, this project I’m doing uses only the sublime or Notepad and when making the html itself you insert the java into html, this is what I was trying to do I wanted instead of Jquery, to have the javascript code, but it has to change some things right?

  • when clicking pass value nothing appears :( that code would enter where? in <javascript></javascript> ??

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.