Compilare dinamicamente i valori del modulo con jQuery

Question

So come farlo con PHP puro, ma ho bisogno di farlo senza ricaricare la pagina. Esiste comunque jQuery per recuperare in modo efficace alcuni risultati del database (in base a ciò che un utente ha inserito nel primo campo di testo di un modulo) quindi compilare alcuni dei campi rimanenti con i dati ritirati da una query db?

In sostanza mi piacerebbe vedere l'utente si allontana dal campo di testo (o da tabulazione fuori o facendo clic nel campo accanto) e boom, la query viene inviata utilizzando il valore inserito in questo campo ed i campi successivi sono quindi popolato con una pagina di ricarica.

Ho familiarità con le nozioni di base di jQuery ma non l'ho usato per fare qualcosa di simile in cui sto estraendo dati dal server e cercando di popolare il lato client.

Qualsiasi suggerimento/esempio su come iniziare al meglio con questo sarebbe molto apprezzato. Grazie.

• Nicholas

Answer 1

Assumendo questo esempio 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" /> 

Si potrebbe avere questo 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); 
      } 
      }); 
     }); 
}); 

Poi basta avete uno script PHP (in questo caso lookup.php) che prende una e-mail nella stringa di query e restituisce un array formattato JSON con i valori a cui si desidera accedere. Questa è la parte che in realtà colpisce il database per cercare i valori:

<?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); 
?> 

Avrai voglia di fare altre cose come sterilizzare l'input e-mail, ecc, ma dovrebbe farti andare nella giusta direzione.

Answer 2

Se è necessario colpire il database, è necessario colpire ancora una volta il web server (per la maggior parte).

Quello che puoi fare è utilizzare AJAX, che effettua una richiesta a un altro script sul tuo sito per recuperare i dati, ottiene i dati e quindi aggiorna i campi di input che desideri.

chiamate

AJAX possono essere fatti in jQuery con la chiamata di funzione $ .ajax(), quindi questo accadrà

browser di utente inserisce input che attiva un trigger che fa una chiamata AJAX

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

Ora dovrai indicare che AJAX chiama su script (sembra che tu stia lavorando PHP) che farà la query che desideri e invierà i dati.

Probabilmente si desidera utilizzare la chiamata in oggetto JSON in modo da poter passare di nuovo un oggetto JavaScript, che sarà più facile da usare rispetto ritorno XML ecc

la funzione PHP json_encode ($ phpobj); sarà utile

Answer 3

compilare automaticamente tutti i campi del modulo da un array

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>