Recover data in jQuery form

Question

called js.

function clienteChange() {

   var id = $('#idCliente').val();
   $.ajax({ 
       url:"/Entregas/clientes.endereco.php?id=" + id, 
       dataType : 'json', 
       success:function(result) { 
           $('[name="cham_endereco[]"]').val(result.endereco); 
           $('[name="cham_numero[]"]').val(result.numero); 
           $('[name="cham_bairro[]"]').val(result.bairro); 
           $('[name="cham_cidade[]"]').val(result.cidade); 
       } 
   });  
}

To fetch the results, I made the.endereco.php clients this way:

$result['endereco'] = "teste";
die(json_enconde($result));

called Add.php

<tbody id="servicosTable" style="width: 898px;">
<tr id="servico_0">
    <td style="line-height: 10px !important;">

        <select class="input-small" name="cham_tiposervico[]">
            <option value="0" selected >Coleta</option>
            <option value="1"  >Entrega</option>
            <option value="2"  >Retorno</option>
        </select>
    </td>
    <td style="line-height: 10px !important; font-size: 12px !important;">
        <input class="input-small" style="width: 222px !important;" type="text" name="cham_endereco[]" value="">
    </td>
    <td style="line-height: 10px !important; font-size: 12px !important;">
        <input class="input-small" style="width: 50px !important;" type="text" name="cham_numero[]" value="">
    </td>
    <td style="line-height: 10px !important;  font-size: 12px !important;">
        <select class="input-small selectCidade" name="cham_cidade[]" id="cham_cidade[]" style="width: 140px;">
        <option value="0">Selecione</option>
            <? foreach($this->data['listaCidade'] as $cidade){ ?>
            <option value="<? echo $cidade->idCidade; ?>"><? echo $cidade->cidade; ?></option>
            <? } ?>
        </select>
    </td>
    <td style="line-height: 15px !important; font-size: 12px !important;">                                                                <select class="input-small selectBairro" name="cham_bairro[]" id="cham_bairro[]" style="width: 120px;">
            <option value="">Selecione</option>
        </select>
    </td>
    <td style="line-height: 15px !important; font-size: 12px !important;">
        <input class="input-small" type="text" name="cham_falarcom[]" value="">
    </td>
    <td>
        <button class="btn" type="button" onclick="removerServico(0)" style="padding: 3px; width: 32px !important;"><i class="icon-trash"></i></button>
    </td>
</tr>


</tbody>

This is the select that searches the customers... and when selecting, you must print the address of each in their respective fields, address, number, neighborhood and city.

Form:

select class="input-xxlarge" style="width: 409px !important;" id="idCliente" name="idCliente" onchange="clienteChange()"

But I’m not quite sure what would be wrong?

Answer 1

HTML

André, Let’s go to some remarks, maybe one of them will solve the problem:

• It is not necessary (and not recommended) to name fields as arrays (by inserting "[]" at the end of the name) if this is not the intention
• Identifying the fields with "id" is recommended so that Ids are unique and so Jquery takes LESS time to find the elements.

Your fields could stay in this structure:

 <input type="text" name="cham_endereco" id="cham_endereco" value="">

Your select idCliente can use Jquery to interpret your events, so you can remove onchange="clienteChange()" (is an anti-JQUERY practice):

<select class="input-xxlarge" style="width: 409px !important;" id="idCliente" name="idCliente">

JQUERY

And the JQUERY request "listens" through the event "change" whatever will be chosen in select idCliente:

$('#idCliente').on('change', function()
{
    var id = $(this).val();

    // ajax
    $.ajax({ 
        url:"/Entregas/clientes.endereco.php?id=" + id, 
        dataType : 'json',
        // além da opção "success", você pode utilizar também as opções 
        // "beforeSend" e "always", assim, ANTES de enviar, poderia por exemplo
        // desabilitar o select box e dentro de "always", habilitar, evitando 
        // que o usuário "brinque" com a requisição do select box (flood)
        beforeSend: function()
        {
            // (código que desabilita o selectbox)
        },
        success:function(result) 
        { 
            $('#cham_endereco').val(result.endereco); 
            // outros campos (...) 
        } 
    })
    .always(function(data)
    {
            // habilitar novamente o selectbox
    });
});

CODEIGNITER

IS essential return the "header" of the request as JSON (application/json):

$result['endereco'] = "teste"; 

return $this->output
        ->set_content_type('application/json')
        ->set_output(json_encode($result));

TIP

Use the extension POSTMAN CHROME is essential for AJAX validations and simulations without using a line of code.