Change radio button properties from select

Question

Dear(s) I see myself in the following situation in which I cannot imagine a solution:

We have a selection field in html containing some Brazilian states and the Federal District, when choosing an option, it would lead me to open another type of choice a radio button, between Capital and Interior being each capital and the option of interior with their respective values, where I would take this value of the given capital or the interior and lead to make an account by multiplying a value of another radio button equivalent to the daily ones so show this value in a text field.

Exemplo Numero de diárias: ()Uma diária (x)Duas diárias ()Três diárias Selecione o estado: Select SP\/ //Apareceria outro radio button: (x)São Paulo () Interior In the case of São Paulo the value would be R$200.00 times daily then the textfield with the help of javascript would be: Value = 400,00

            <select name="estado" id="estado" >
            <option name="nenhum" value=""> Escolher </option>
            <option name="DF" value="DF"> Distrito Federal </option>
            <option name="SP" value="SP"> São Paulo </option>
            <option name="outros" value="Outros"> Outros Estados 
</option>

//It opens multiple choice of two options if the user chose the Federal District, then

<input required="required" value="Brasília" name="capital" type="radio">  
<label for="capital">Brasília</label> <input required="required"  value="Interior" name="capital" type="radio"><label         for="capital">Interior</label>

//Note that depending on the field select the valor and the label radio button would change.
//Soon the daily rate for Brasilia has value of 250.30 and the interior is fixed for all states 160.00.
At that point I would need to do the I imagine account with IFs for each capital and multiply with the value of the daily radio button element up there.

That was the way I thought. Was there any way I could do that or any other way that I could get the same result? That is to have the name of the capital to be able to write in the database, and the value of the capital to make the account with the daily ones. How could I do this in Json or Javascript?

Answer 1

See if this is what you want?

[EDIT] Here’s an update with the whole problem: http://jsfiddle.net/q3N95/17/ See if that’s what you wanted, anything at all, just ask.

<input id="d1" required="required" value="1" name="diaria" type="radio">  
<label id="diaria" for="diaria">Uma diária</label> 

<input id="d2" required="required" value="2" name="diaria" type="radio">  
<label id="diaria" for="diaria">Duas diárias</label> 

<input id="d3" required="required" value="3" name="diaria" type="radio">  
<label id="diaria" for="diaria">Três diária</label> 
<br>

<select name="estado" id="estado" onChange="trocaEstado();">
   <option id="nenhum"  value="0"  > Escolher         </option>
   <option id="DF"      value="250"> Distrito Federal </option>
   <option id="SP"      value="200"> São Paulo        </option>
   <option id="outros"  value="300"> Outros Estados   </option>
</select>
<br>

<input id="input_capital" required="required" value="0" name="capital" type="radio" >  
<label id="capital" for="capital">Escolher</label> 
<input id="input_interior" required="required"  value="160" name="capital" type="radio">
<label id="interiror" for="capital">Interior</label>
<br>
<br>

<label for="resultado">Resultado</label> 
<input readonly="readonly" id="resultado" value="Zero"></input>
<br>
<!--input para o estado -->
<label for="estado_s">Estado</label> 
<input readonly="readonly" id="estado_s" value="nenhum"></input>    

<script>

function trocaEstado()
{
    var e        = document.getElementById("estado");
    var strcap   = e.options[e.selectedIndex].text;
    var strvalue = e.options[e.selectedIndex].value;

    //vai buscar o id da option
    var estado_s = e.options[e.selectedIndex].id;


    document.getElementById('input_capital').value=strvalue;
    document.getElementById('input_capital').checked=false;
    document.getElementById('capital').innerHTML=strcap;

    //mete o id da option no input estado_s
    document.getElementById('estado_s').value=estado_s;

}

 $(document).ready(function() {
    var capital=null;
    var diaria=null;
    $('input:radio[name=capital]').change(function() {
       capital = this.value;
       if(diaria)
           document.getElementById('resultado').value=(capital*diaria);
    });
    $('input:radio[name=diaria]').change(function() {
       diaria = this.value;
       if(capital)
           document.getElementById('resultado').value=(capital*diaria);
    });
});

</script>