Completar dinámicamente los valores de formulario con jQuery

Question

Sé cómo hacer esto con PHP puro, pero necesito hacerlo sin tener que volver a cargar la página. ¿Hay alguna forma con jQuery de retirar efectivamente algunos resultados de la base de datos (en función de lo que un usuario haya ingresado en el primer campo de texto en un formulario) y completar algunos de los campos restantes con datos retirados de una consulta db?

Básicamente, me gustaría ver al usuario alejarse del campo de texto (ya sea mediante tabulación o haciendo clic en el siguiente campo) y boom, la consulta se envía utilizando el valor ingresado en ese campo y los campos siguientes son luego poblado sin recarga de página.

Estoy familiarizado con los principios básicos de jQuery pero no lo he usado para hacer algo como esto en el que estoy sacando datos del servidor y tratando de poblarlo del lado del cliente.

Cualquier sugerencia/ejemplo sobre cómo comenzar mejor con esto sería muy apreciada. Gracias.

• Nicholas

Answer 1

Asumiendo este ejemplo HTML:

<input type="text" name="email" id="email" /> 
<input type="text" name="first_name" id="first_name" /> 
<input type="text" name="last_name" id="last_name" /> 

Usted podría tener este javascript:

$("#email").bind("change", function(e){ 
    $.getJSON("http://yourwebsite.com/lokup.php?email=" + $("#email").val(), 
     function(data){ 
      $.each(data, function(i,item){ 
      if (item.field == "first_name") { 
       $("#first_name").val(item.value); 
      } else if (item.field == "last_name") { 
       $("#last_name").val(item.value); 
      } 
      }); 
     }); 
}); 

A continuación, sólo tiene un script PHP (en este caso lookup.php) que toma un correo electrónico en el cadena de consulta y devuelve una matriz formateada JSON con los valores a los que desea acceder. Esta es la parte que golpea realmente la base de datos para buscar los valores:

<?php 
//look up the record based on email and get the firstname and lastname 
... 

//build the JSON array for return 
$json = array(array('field' => 'first_name', 
        'value' => $firstName), 
       array('field' => 'last_name', 
        'value' => $last_name)); 
echo json_encode($json); 
?> 

Usted querrá hacer otras cosas como desinfectar la entrada de correo electrónico, etc, pero debe conseguir que va en la dirección correcta.

Answer 2

Si usted necesita para golpear la base de datos, es necesario golpear el servidor web de nuevo (en su mayor parte).

Lo que puede hacer es usar AJAX, que hace una solicitud a otra secuencia de comandos en su sitio para recuperar datos, obtener los datos y luego actualiza los campos de entrada que desea.

llamadas

AJAX se pueden hacer en jQuery con la llamada a la función $ .ajax(), así que esto va a suceder

navegador del usuario entra de entrada que activa un desencadenador que hace una llamada AJAX

$('input .callAjax').bind('change', function() { 
    $.ajax({ url: 'script/ajax', 
      type: json 
      data: $foo, 
      success: function(data) { 
      $('input .targetAjax').val(data.newValue); 
      }); 
); 

Ahora Deberá señalar esa llamada AJAX al script (parece que está trabajando con PHP) que hará la consulta que desea y devolverá los datos.

Es probable que desee utilizar la llamada a un objeto JSON para que pueda pasar de nuevo un objeto de JavaScript, que será más fácil de usar que el retorno de XML, etc.

La función php json_encode ($ phpobj); será útil.

Answer 3

rellenar automáticamente todos los campos de la forma de una matriz

http://jsfiddle.net/brynner/wf0rk7tz/2/

JS

function fill(a){ 
    for(var k in a){ 
     $('[name="'+k+'"]').val(a[k]); 
    } 
} 

array_example = {"God":"Jesus","Holy":"Spirit"}; 

fill(array_example); 

HTML

<form> 
<input name="God"> 
<input name="Holy"> 
</form>