Set value for combo with Ajax

Question

Set value for combo with Ajax

Navigation

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

1

I use the script below to feed some text fields with Oracle database values. But there arose a situation where I need to feed a combo of two values (ACTIVE and INACTIVE). In Ajax below, it returns the values of the bank but not arrow in index.php. If I take the field 'situation' it feeds the other 2 (name and code). But if I leave it active, it stops at 'Searching ...'. How do I set the bank's values in the combobox? Thanks

INDEX.php

              <tr>
                 <td>Código (4 digitos): </td>
                 <td><input type = "text" name="codigo" id="codigo" size = 15 maxlength = 4 onkeyup="troca_campo2(this)" onkeypress="return SomenteNumero(event)"></td>
              </tr>


              <tr>
                 <td>Nome Completo: </td>
                 <td><input type="text" id="nome" name="nome" size=70 maxlength=50 onkeyup="this.value = this.value.toUpperCase()"></td>
               </tr>

              <tr>
                  <td>Situação:</td>
                  <td><select name="situacao">
                       <option id="situacaoA" value="ATIVO">ATIVO</option>
                       <option id="situacaoI" value="INATIVO">INATIVO</option>
                       </select></td>
              </tr>

ajax.JS

/**
  * Função para criar um objeto XMLHTTPRequest
  */
 function CriaRequest() {
     try{
         request = new XMLHttpRequest();
     }catch (IEAtual){

         try{
             request = new ActiveXObject("Msxml2.XMLHTTP");
         }catch(IEAntigo){

             try{
                 request = new ActiveXObject("Microsoft.XMLHTTP");
             }catch(falha){
                 request = false;
             }
         }
     }

     if (!request)
         alert("Seu Navegador não suporta Ajax!");
     else
         return request;
}

//Não executa nada até a execução terminar
var requestActive = false;

function getDados() {
    if (requestActive) return;
    requestActive = true;
    // Declaração de Variáveis
    /* Caso for necessário passar mais parametros além do nome
     * basta adicionar uma variável aqui e editar no GET
     */
    var ids = ["codigo", "nome", "situacao"];
    var cracha = document.getElementById("cracha").value; //CAMPO QUE VEM DO INDEX.PHP
    var result = document.getElementById("content"); //DIV DE RETORNO DOS DADOS
    var xmlreq = CriaRequest();

    // Exibe a mensagem de progresso
    //result.innerHTML = '<img src="images/Progresso.gif"/>';
    ids.forEach(function (id) {
        document.getElementById(id).value = 'Pesquisando...';
    });

    // Iniciar uma requisição
    // Se for colocar mais variáveis, é aqui. Exemplo: processa.php?txtnome=" + nome + '&admissao=' + admissao
    xmlreq.open("GET", "processa.php?cracha=" + cracha, true);

    // Atribui uma função para ser executada sempre que houver uma mudança de estado
    xmlreq.onreadystatechange = function () {
        // Verifica se foi concluído com sucesso e a conexão fechada (readyState=4)
        if (xmlreq.readyState == 4) {
            // Verifica se o arquivo foi encontrado com sucesso
            if (xmlreq.status == 200) {
                //Se o retorno foi vazio do Oracle
                if (xmlreq.responseText == "") {
                    document.getElementById("cracha").focus();
                    document.getElementById("cracha").value = '';
                    ids.forEach(function (id) {
                        document.getElementById(id).value = 'NÃO ENCONTRADO!';
                    });
                //Se encontrou dados
                } else {
                    //Aqui recebe os dados do processa.php, abre e aplica nos campos desejados
                    var dados = JSON.parse(xmlreq.responseText);
                    // função para preencher os campos com os dados
                    ids.forEach(function (id) {
                        document.getElementById(id).value = dados[id];
                    });
                }
            } else {
                result.innerHTML = "Erro: " + xmlreq.statusText;
            }
        }
        requestActive = false;
    };
    xmlreq.send(null);
}

javascript ajax

asked by anonymous 11.09.2015 / 15:42

2 answers

1

There probably should be an error on your console, as I suspect that when you try to access document.getElementById(id) where id is equal to situacao , it is not found because your combo does not have id , only name . Then it tries to assign value to the property value of null .

Anyway, you should do a different treat for the combo inside the loop:

ids.forEach(function (id) {
    var el = document.getElementById(id);

    if (el != null) {
        if (el.type && el.type == "text") {
            el.value = 'NÃO ENCONTRADO!';
        }
        else if (el.tagName == "select") {
            el.disabled = true;
        }
    }
});

Or something like that, I made a headache, it has to be improved.

11.09.2015 / 15:48

Make an image grow proportionally up to a specific limit Randomization / Randomization C #

score 1 · Accepted Answer

In case the best way is not to pass id to <option> , but to <select> , and in the code that you set the values, you pass the select id with the value.

Your html:

<select name="situacao" id="situacao">
  <option value="ATIVO">ATIVO</option>
  <option value="INATIVO">INATIVO</option>
</select>

Called js:

document.getElementById("situacao").value = "ATIVO";