Retrieve data in form in jQuery

Navigation
0

call.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 search for results, I've made clients.endereco.php like this: 

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

Add.php calls 

<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 for customers ... and when selecting, you should print the address of each one 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 trying to develop, what would have gone wrong?

    
asked by anonymous 23.06.2015 / 23:46

1 answer

1

HTML

Andre , let's take a few notes, maybe one of them will solve the problem:

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

Your fields could be 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()" (it's an anti-JQUERY practice): 

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

JQUERY

And the JQUERY request "listens" through the "change" event to 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

It is essential to return the request header as JSON ( application/json ): 

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

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

TIP

Use the POSTMAN extension of CHROME, is essential for AJAX validations and simulations without having to use a line of code.

    
24.06.2015 / 02:03
Group Query Results How to add more fields to Wordpress user registry wp-login