jQuery를 사용하여 양식 값을 동적으로 입력

jQuery를 사용하여 양식 값을 동적으로 입력

순수 PHP로 어떻게 하는지 알고 있지만 페이지를 다시 로드하지 않고 해야 합니다.jQuery를 사용하여 일부 데이터베이스 결과(사용자가 양식의 첫 번째 텍스트 필드에 입력한 내용을 기반으로)를 효과적으로 가져온 다음 나머지 필드 중 일부를 DB 쿼리에서 가져온 데이터로 채울 방법이 있습니까?

기본적으로 사용자가 텍스트 필드에서 벗어나(탭아웃하거나 다음 필드를 클릭하여) 붐을 일으키면 해당 필드에 입력된 값을 사용하여 쿼리가 제출되고 이후 필드는 페이지 다시 로드 없이 채워집니다.

저는 jQuery의 기본 사항을 잘 알고 있지만 서버에서 데이터를 가져와 클라이언트 측에 입력하려고 하는 이런 작업에는 사용하지 않았습니다.

이 작업을 가장 잘 시작하는 방법에 대한 제안/예를 들어주시면 감사하겠습니다.감사해요.

• 니콜라스

이 예를 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" />

다음 자바스크립트를 사용할 수 있습니다.

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

그러면 쿼리 문자열에 있는 전자 메일을 가져오고 액세스할 값이 포함된 JSON 형식 배열을 반환하는 PHP 스크립트(이 경우 lookup.php)가 있습니다.이 부분은 실제로 데이터베이스를 눌러 값을 조회하는 부분입니다.

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

전자 메일 입력을 검사하는 등의 다른 작업을 수행할 수 있지만 올바른 방향으로 진행할 수 있어야 합니다.

배열에서 모든 양식 필드 자동 채우기

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>

데이터베이스를 눌러야 하는 경우 대부분 웹 서버를 다시 눌러야 합니다.

AJAX를 사용하면 사이트의 다른 스크립트에 데이터 검색을 요청하고 데이터를 가져온 다음 원하는 입력 필드를 업데이트할 수 있습니다.

AJAX 호출은 $.ajax() 함수 호출을 사용하여 jquery로 수행할 수 있으므로 이 작업이 수행됩니다.

사용자의 브라우저가 AJAX 호출을 수행하는 트리거를 실행하는 입력을 입력합니다.

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

이제 원하는 쿼리를 수행하고 데이터를 반환하는 스크립트(PHP 작업 중인 것처럼 들림)에서 AJAX 호출을 가리켜야 합니다.

JSON 객체 호출을 사용하여 XML 등을 반환하는 것보다 사용하기 쉬운 Javascript 객체를 전달할 수 있습니다.

php 함수 json_encode($phpobj);가 유용합니다.

언급URL : https://stackoverflow.com/questions/558445/dynamically-fill-in-form-values-with-jquery