Динамически заполняйте значения формы с помощью jQuery - PullRequest
Новая
       24

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

24 голосов
/ 17 февраля 2009

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

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

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

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

  • Николай

Ответы [ 3 ]

30 голосов
/ 17 февраля 2009

В этом примере 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-скрипт (в данном случае 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 );
?>

Вы захотите заняться другими делами, такими как очистка ввода электронной почты и т. Д., Но вы должны двигаться в правильном направлении.

12 голосов
/ 03 февраля 2015

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

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>
8 голосов
/ 17 февраля 2009

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

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

Вызовы 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 вызывает скрипт (звучит так, как будто вы работаете в PHP), который будет выполнять нужный запрос и отправлять данные обратно.

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

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

...