When changing select call run query

Asked

Viewed 990 times

1

I’m trying to change a script I have for weather forecast, but unsuccessfully, today the user selects an option in select and clicks the button to run the search, what I’m trying to do is use Onchange to shorten the operation.

What I tried unsuccessfully was this:

onchange="document.getElementById('frmBusca')

The script is like this today:

<form id="frmBusca" class="sky-form clearfix" action="" method="post">
<div class="row">
    <div class="col-md-12">
        <div class="fancy-form fancy-form-select">
            <select name="Cidade" class="form-control" id="Cidade" tabindex="1" >
                <option value="0">Cidade</option>
                <?php foreach ($ResCidade as $Cidade) { ?>
                <option value="<?php echo $Cidade->IdCidade; ?>"><?php echo $Cidade->Descricao; ?></option>
                <?php } ?>
            </select>
            <i class="fancy-arrow"></i> </div>
    </div>
</div>
<div class="row">
    <div class="col-md-3"></div>
    <div class="col-md-6">
        <button class="btn btn-primary  pull-right btn-block">PESQUISAR</button>
    </div>
    <div class="col-md-3"></div>
</div>

The one being called:

<script type="text/javascript">
// BUSCA DADOS DO CLIMA
$(function() {      
    $("#frmBusca").validate({
        submitHandler: function(form) {             
            $.ajax({
                type: 'POST',
                url: 'pBuscaClima.php',
                data: data,
                dataType: 'html',                   
                success: function(response)

                    // EXIBINDO O RETORNO DAS INFORMAÇÕES   
                     $("#msgClima").html(response);
                    // RESETANDO A FUNÇÃO
                    // _toggle();

                    $('#frmBusca').each(function() {
                        this.reset();
                    });             


                },
                error: function(xhr, ajaxOptions, thrownError) {
                    console.log(xhr, ajaxOptions, thrownError);
                    $("#msgClima").html('<div class="alert alert-danger fade in"><button class="close" data-dismiss="alert">×</button><i class="fa-fw fa fa-times"></i><strong>ATENÇÃO!</strong> Ocorreu um erro ao tentar enviar a pergunta. Contate o suporte técnico.</div>');
                }
            });
            return false;
        }
    });
});

php jquery

  • You need this function in validate?

2 answers

1


When there is the event change in select, take the value and send via ajax:

<script type="text/javascript">
// BUSCA DADOS DO CLIMA   

$(document).on('change', '#Cidade', function(){  

    let cidade = $('#Cidade option:selected').val();

    $.ajax({
        type: 'POST',
        url: 'pBuscaClima.php',
        data: {Cidade: cidade},
        dataType: 'html',                   
        success: function(response){

            // EXIBINDO O RETORNO DAS INFORMAÇÕES   
             $("#msgClima").html(response);
            // RESETANDO A FUNÇÃO
            // _toggle();

            $('#frmBusca').each(function() {
                this.reset();
            });             


        },
        error: function(xhr, ajaxOptions, thrownError) {
            console.log(xhr, ajaxOptions, thrownError);
            $("#msgClima").html('<div class="alert alert-danger fade in"><button class="close" data-dismiss="alert">×</button><i class="fa-fw fa fa-times"></i><strong>ATENÇÃO!</strong> Ocorreu um erro ao tentar enviar a pergunta. Contate o suporte técnico.</div>');
        }
    });
});

  • Thanks for the excellent tip @Alisson Acioli, thanks.

0

Your Onchange has to be in Select and not in Form.

I made an example for your reference like this:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

</head>

    <body>
        <form>
            <div>
                <select name="Cidade" id="Cidade" tabindex="1" onchange="BuscaClima()" >
                    <option value="0">Cidade</option>
                    <option value="1">BH</option>
                    <option value="2">SP</option>
                    <option value="2">RIO</option>
                    <!--...-->
                </select>
                <div id="demo"></div>
            </div>
        </form>


        <script type="text/javascript">
            function BuscaClima() {
                //Exemplo
                var x = document.getElementById("Cidade").value;
                document.getElementById("demo").innerHTML = "You selected: " + x;

                //Chama sua function BuscaClima
                $.ajax({
                    type: 'POST',
                    url: 'pBuscaClima.php',
                    data: data,
                    dataType: 'html',                   
                    success: function(response){
                        $("#msgClima").html(response);
                    },
                    error: function(xhr, ajaxOptions, thrownError) {
                        console.log(xhr, ajaxOptions, thrownError);
                        $("#msgClima").html('<div class="alert alert-danger fade in"><button class="close" data-dismiss="alert">×</button><i class="fa-fw fa fa-times"></i><strong>ATENÇÃO!</strong> Ocorreu um erro ao tentar enviar a pergunta. Contate o suporte técnico.</div>');
                    }
                });
            }
        </script>

    </body>

</html>

  • Thanks @Bruno Heringer, your help has collaborated too.

Browser other questions tagged php jquery

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