Search the bank from option

Asked

Viewed 51 times

2

I need that when selecting an option in a option, a search occurs in the bank without leaving the page and shows what was returned through this search and fill fields with the results. I already have the layout mounted and the script for the bank, but I don’t know how to do when an option is selected in the option.

  • 5

    You will need ajax.

  • I would have a suggestion how to do?

  • 1

    Puts a EventListener in the onChange of select. This Listener should make an ajax call to the server-side (PHP) and when the call is completed you must fill in the fields with the return received from server.

  • You can use pure ajax or jquery when mounting this code attaches it to evente(on)Change() ie each time an option is selected javascript will make a request for php it will return something(text, json etc) the last step is to treat this return.

1 answer

1

There is no exact answer to your question

As the @rray comment says, you will need to AJAX.

What is AJAX?

AJAX is a technology that makes it possible to make a request to the server without having to refresh the page, which I assume is exactly what you want to do.

How I use AJAX?

Well, it’s relatively simple. This type of request exists in the browser through the xmlHttpRequest, that works more or less like this:

var xhttp = new XMLHttpRequest();
//Essa parte é executada quanddo a requisição retornou do servidor
xhttp.onreadystatechange = function() {
    //Verifica se a requisição foi um sucesso
    if (this.readyState == 4 && this.status == 200) {
       // Aqui é aonde você faz as coisas que você precisa depois que contatou o servidor;
    }
};

//Parametro 1 -> Nome do método a ser chamado no servidor
//Parametro 2 -> Nome da página aonde está o parâmetro 1
//Parametro 3 -> Define se é síncrono ou assíncrono
//É nesse método que você efetivamente FAZ requisição
xhttp.open("GET", "filename", true);
xhttp.send();

In case, I know you have one option, then you could do something like: (note that my examples are generic, because I have no way of knowing your code, nor what you want accurately)

document.getElementByID('seuElemento').onchange = function (){
    requisicaoAjax();
}

function requisicaoAjax(){
    var xhttp = new XMLHttpRequest();

    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
           alert('Ei, foi um sucesso!');
        }
    };
    xhttp.open("GET", "pagina", true);
    xhttp.send();
}

Maybe you’ve heard of the library JQuery (I’m not saying you should use, just that it exists). It encapsulates the xmlHttpRequest, and it looks really cute, look:

$.ajax({
    type: "POST",
    url: 'pagina/metod',
    data: 'seusParametros',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (msg) {
        //foi um sucesso!
    },
    error: function (msg) {
        //deu pau, trate seu erro aqui...
    }
});

Anyway, this is just a tiny introduction. I recommend reading that

  • Thank you for the suggestion and explanation, I will try!

Browser other questions tagged

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