Receive 2 or more data by AJAX with SELECT

Navigation
0

What I want is to be able to select the two options of the combo ( MES and ANO ) and that by means of the function onChange show me the data of the graph, I clarify that with a single data (MES) It shows me the results, but I do not know how to do it with two variables. 

<div class="caja">
<select name="ANO" id="ANO">
    <option>Seleccione...</option>
    <option>2014</option>
    <option>2016</option>
    <option>2015</option>
    <option>2017</option>
    <option>2018</option>
  </select>
</div>
<br>
<div class="caja">
    <select name="MES" id="MES" onChange="mostrarResultados(this.value)">
        <option>Seleccione...</option>
        <option value="1">ENERO</option>
        <option value="2">FEBRERO</option>
        <option value="3">MARZO</option>
        <option value="4">ABRIL</option>
        <option value="5">MAYO</option>
        <option value="6">JUNIO</option>
        <option value="7">JULIO</option>
        <option value="8">AGOSTO</option>
        <option value="9">SEPTIEMBRE</option>
        <option value="10">OCTUBRE</option>
        <option value="11">NOVIEMBRE</option>
        <option value="12">DICIEMBRE</option>
    </select>
</div>
    <div class="resultados"><canvas id="grafico"></canvas></div>
</body>

PHP 

<?php
$MES = $_POST['MES'];
$ANO = $_POST['ANO'];
?>

JQUERY 

<script>
        $(document).ready(mostrarResultados(2015));  
            function mostrarResultados(MES){
                $.ajax({
                    type:'POST',
                    url:'controlador/procesar.php',
                    data:'MES='+ MES,
                    success:function(data){

                        var valores = eval(data);

                        var dia1 = valores[0];
                        var dia2 = valores[1];
                        var dia3 = valores[2];
                        var dia4 = valores[3];
                        var dia5 = valores[4];
                        var dia6 = valores[5];
                        //Continua


                        var Datos = {
                                labels : ['DIA_1', 'DIA_2', 'DIA_3', 'DIA_4', 'DIA_5', 'DIA_6'],
                                datasets : [
                                    {
                                        fillColor : 'rgba(91,228,146,0.6)', 
                                        strokeColor : 
                                        highlightFill : 
                                        highlightStroke : 
                                        data : [dia1, dia2, dia3, dia4, 
dia5, dia6, dia7, dia8, dia9, dia10, dia11, dia12, dia13, dia14, dia15, 
dia16, dia17, dia18, dia19, dia20, dia21, dia22, dia23, dia24, dia25, dia26, 
dia27, dia28, dia29, dia30, dia31]
                                    }
                                ]
                            }

                        var contexto = 
document.getElementById('grafico').getContext('2d');
                        window.Barra = new Chart(contexto).Bar(Datos, { 
responsive : true });
                    }
                });
                return false;
            }
</script>
    
asked by Anderviver 20.09.2017 в 00:01
source

2 answers

1

Send the json notation parameters specifying the name of them: 

var _mes = $("#MES").val();
var _ano = $("#ANO").val();
 $.ajax({
    type:'POST',
    url:'controlador/procesar.php',
    data: { MES : _mes , ANO : _ano }
    //...
    
answered by 20.09.2017 / 02:51
source
0

And if you take out the document ready and on the onchange you execute the showResults () function. 

function mostrarResultados(){
    var mesSelect=document.getelementsById('MES').value;
    var anoSelect=document.getelementsById('ANO').value;
                $.ajax({
                    type:'POST',
                    url:'controlador/procesar.php',
                    data:{MES:mesSelect, ANO:anoSelect},
                    success:function(data){
    
answered by 20.09.2017 в 04:44
How do I insert an image from VB.net to Sql? Struts2 can not find index