Tự động điền vào các giá trị biểu mẫu với jQuery

Question

Tôi biết cách làm điều này với PHP thuần túy nhưng tôi cần thực hiện điều này mà không cần tải lại trang. Có anyway với jQuery để có hiệu quả kéo trở lại một số kết quả cơ sở dữ liệu (dựa trên những gì người dùng đã nhập vào trường văn bản đầu tiên trên biểu mẫu) sau đó điền một số trường còn lại với dữ liệu được kéo trở lại từ truy vấn db?

Về cơ bản, tôi muốn thấy người dùng di chuyển ra khỏi trường văn bản (bằng cách tabbing hoặc nhấp vào trường tiếp theo) và bùng nổ, truy vấn được gửi bằng giá trị được nhập trong trường đó và các trường tiếp theo sau đó tải lại trang w/oa.

Tôi quen thuộc với những điều cơ bản của jQuery nhưng tôi đã không sử dụng nó để làm bất cứ điều gì như thế này, trong đó tôi kéo dữ liệu trở lại từ máy chủ và cố gắng để cư nó phía khách hàng.

Bất kỳ đề xuất/ví dụ nào về cách bắt đầu tốt nhất với điều này sẽ được đánh giá rất nhiều. Cảm ơn.

• Nicholas

Answer 1

Giả sử ví dụ này 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" /> 

Bạn có thể có javascript này:

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

Sau đó chỉ cần bạn có một kịch bản PHP (trong trường hợp này lookup.php) mà phải mất một email trong chuỗi truy vấn và trả về một mảng được định dạng JSON trở lại với các giá trị bạn muốn truy cập. Đây là phần thực sự truy cập cơ sở dữ liệu để tra cứu các giá trị:

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

Bạn sẽ muốn làm những việc khác như khử trùng đầu vào email, v.v., nhưng bạn nên đi đúng hướng.

Answer 2

Nếu bạn cần để đạt cơ sở dữ liệu, bạn cần phải nhấn web server nữa (đối với hầu hết các phần).

Việc bạn có thể làm là sử dụng AJAX, yêu cầu một tập lệnh khác trên trang web của bạn truy xuất dữ liệu, lấy dữ liệu và sau đó cập nhật các trường nhập bạn muốn.

cuộc gọi

AJAX có thể được thực hiện trong jquery với $ .ajax() gọi hàm, vì vậy đây sẽ xảy ra

trình duyệt của người sử dụng vào đầu vào mà bắn một kích hoạt mà làm cho một cuộc gọi AJAX

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

Bây giờ bạn sẽ cần phải chỉ ra rằng AJAX gọi tại kịch bản (âm thanh như bạn đang làm việc PHP) mà sẽ làm các truy vấn bạn muốn và gửi lại dữ liệu.

Bạn có thể sẽ muốn sử dụng cuộc gọi đối tượng JSON để bạn có thể vượt qua trở lại một đối tượng javascript, mà sẽ được dễ dàng hơn để sử dụng hơn so với lợi nhuận XML, vv

Chức năng php json_encode ($ phpobj); sẽ hữu ích.

Answer 3

Tự động điền vào tất cả các lĩnh vực hình thức từ một mảng

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>