Динамически заполнять значения формы с помощью jQuery

Я знаю, как это сделать с помощью чистого PHP, но мне нужно сделать это, не перезагружая страницу. Есть ли когда-нибудь с jQuery, чтобы эффективно отталкивать некоторые результаты базы данных (на основе того, что пользователь вводит в первом текстовом поле в форме), затем заполняют некоторые из оставшихся полей данными, которые извлекаются из запроса db?

По сути, я хотел бы, чтобы пользователь отошел от текстового поля (либо путем табуляции, либо щелчком в следующем поле), так и с бумом, запрос отправляется с использованием значения, введенного в это поле, и последующие поля затем заселенную перезагрузку страницы.

Я знаком с основами jQuery, но я не использовал его, чтобы делать что-либо подобное, в котором я извлекаю данные с сервера и пытаюсь заполнить его на стороне клиента.

Любые предложения/примеры того, как лучше всего начать с этого, будут очень оценены. Спасибо.

Николай

Ответы

Ответ 1

Предполагая этот пример 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" />

У вас может быть этот 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);
            }
          });
        });
});

Тогда просто у вас есть PHP script (в данном случае lookup.php), который берет письмо в строке запроса и возвращает обратно отформатированный массив JSON со значениями, к которым вы хотите получить доступ. Это та часть, которая фактически попадает в базу данных для поиска значений:

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

Вам нужно будет делать другие вещи, такие как дезинфекция ввода электронной почты и т.д., но вы должны идти в правильном направлении.

Ответ 2

Автоматически заполнять все поля формы из массива

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

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>

Ответ 3

Если вам нужно попасть в базу данных, вам нужно снова нажать веб-сервер (по большей части).

Что вы можете сделать, это использовать AJAX, который делает запрос на другой script на вашем сайте для извлечения данных, получения данных и затем обновляет требуемые поля ввода.

Вызов AJAX может быть выполнен в jquery с вызовом функции $.ajax(), так что это произойдет

Пользовательский браузер вводит ввод, который запускает триггер, который вызывает вызов AJAX

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

Теперь вам нужно указать, что вызов AJAX в script (похоже, что вы работаете с PHP), который выполнит требуемый запрос и отправит данные.

Вы, вероятно, захотите использовать вызов объекта JSON, чтобы вы могли передать объект javascript, который будет проще в использовании, чем возврат XML и т.д.

Функция php json_encode ($ phpobj); будут полезны.