web-dev-qa-db-ja.com

jQueryを使用してフォームの値を動的に入力する

Pure PHPでこれを行う方法を知っていますが、ページをリロードせずにこれを行う必要があります。とにかく、ユーザーが入力した内容に基づいて、フォームの最初のテキストフィールド）から、残りのフィールドの一部にdbクエリから引き戻されたデータを入力しますか？

基本的に、ユーザーがテキストフィールドから離れて（タブで移動するか、次のフィールドをクリックして）、ブームになり、そのフィールドに入力された値を使用してクエリが送信され、後続のフィールドにw /ページのリロード。

私はjQueryの基本に精通していますが、サーバーからデータを引き戻し、クライアント側にデータを入力しようとするこのようなことをするためにjQueryを使用したことはありません。

これを始めるのに最適な方法に関する提案/例は非常にありがたいです。ありがとう。

  • ニコラス
javascriptjquerydatabaseajaxdynamic
24
Nicholas Kreidberg

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

電子メールの入力をサニタイズするなど、他のことをしたいと思うでしょうが、正しい方向に進むはずです。

30
Parrots

配列からすべてのフォームフィールドに自動的に入力する

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>
12
Brynner Ferreira

データベースにアクセスする必要がある場合は、Webサーバーに再度アクセスする必要があります（ほとんどの場合）。

できることは、AJAXを使用することです。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オブジェクト呼び出しを使用して、JavaScriptオブジェクトを返すことができます。これは、XMLなどを返すよりも使いやすいでしょう。

Php関数json_encode（$ phpobj）;役に立つでしょう。

8
jskulski