Dynamisch füllen Sie Formularwerte mit jQuery

Question

Ich weiß, wie dies mit reinem PHP tun, aber ich muss dies tun, ohne die Seite neu zu laden. Gibt es sowieso mit jQuery, um einige Datenbankergebnisse (basierend auf dem, was ein Benutzer in das erste Textfeld eines Formulars eingegeben hat) effektiv zurückzuziehen und dann einige der verbleibenden Felder mit Daten aus einer Datenbankabfrage zu füllen?

Im Wesentlichen möchte ich, dass der Benutzer weg von dem Textfeld bewegt (entweder durch Tabulator oder durch Klicken in das nächste Feld) und Boom, die Abfrage wird mit dem Wert in diesem Feld eingegeben und die nachfolgenden Felder sind dann wird ohne Neuladen geladen.

Ich bin vertraut mit den Grundlagen von jQuery, aber ich habe es nicht verwendet, um so etwas zu tun, in dem ich Daten zurück vom Server ziehe und versuche, es Client-Seite zu füllen.

Irgendwelche Vorschläge/Beispiele, wie man am besten damit beginnt, würde sehr geschätzt werden. Vielen Dank.

• Nicholas

Answer 1

Angenommen, dieses Beispiel HTML:

$("#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); 
      } 
      }); 
     }); 
}); 

Dann einfach Sie haben einen PHP-Skript (in diesem Fall lookup.php), die eine E-Mail in den Takes:

<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" /> 

Sie diesen javascript haben könnten Abfragezeichenfolge und gibt ein JSON-formatiertes Array mit den Werten zurück, auf die Sie zugreifen möchten. Dies ist der Teil, der tatsächlich die Datenbank trifft die Werte zu sehen:

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

Sie wollen werden andere Dinge zu tun, wie die E-Mail-Eingang sanieren, etc, aber sollten Sie in die richtige Richtung bekommen.

Answer 2

Wenn Sie die Datenbank zu treffen, müssen Sie erneut auf den Webserver treffen (zum größten Teil).

Sie können AJAX verwenden, das eine Anforderung an ein anderes Skript auf Ihrer Site sendet, um Daten abzurufen, die Daten abzurufen und anschließend die gewünschten Eingabefelder zu aktualisieren.

AJAX Anrufe können mit dem $ Schnipsel() Funktionsaufruf in jquery gemacht werden, so dass diese

Benutzer des Browsers eingibt Eingang, der ein Trigger auslöst, der macht einen AJAX-Aufruf

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

Jetzt passieren wird Sie müssen darauf hinweisen, dass AJAX-Aufruf bei Skript (klingt, als ob Sie PHP arbeiten), die die gewünschte Abfrage ausführen und Daten zurücksenden wird.

Sie werden wahrscheinlich das JSON-Objekt Gespräch verwendet werden sollen, so dass Sie ein Rück Javascript-Objekt übergeben können, das leichter sein wird, Rückkehr XML zu verwenden, als usw.

Die PHP-Funktion json_encode ($ phpobj); wird nützlich sein.

Answer 3

automatisch alle Formularfelder aus einem Array füllen

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>