When changing select call perform search

Question

When changing select call perform search

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I'm trying to change a script I have for weather, but without success, today the user selects an option in the select and clicks the button to perform the search, what I'm trying to do is use OnChange to shorten the operation.

What I tried without success was this:

onchange="document.getElementById('frmBusca')

The script looks 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>

O is being invoked:

<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

asked by anonymous 23.08.2017 / 15:04

2 answers

0

Your OnChange must 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>

23.08.2017 / 15:11

Create object and send by ajax - Codeigniter How to perform function once per visitor after loading the site?

score 1 · Accepted Answer

When there is the change event in the select, get 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>');
        }
    });
});