web-dev-qa-db-fra.com

Remplissez dynamiquement les valeurs du formulaire avec jQuery

Je sais comment faire cela avec PHP pur mais je dois le faire sans recharger la page. Existe-t-il de toute façon avec jQuery pour récupérer efficacement certains résultats de la base de données (en fonction de ce qu'un utilisateur a entré dans le premier champ de texte d'un formulaire), puis remplissez certains des champs restants avec des données extraites d'une requête db?

Essentiellement, je voudrais que l'utilisateur s'éloigne du champ de texte (soit en tabulant ou en cliquant dans le champ suivant) et boom, la requête est soumise en utilisant la valeur entrée dans ce champ et les champs suivants sont ensuite remplis w/o un rechargement de page.

Je connais les bases de jQuery mais je ne l'ai pas utilisé pour faire quelque chose comme ça dans lequel je récupère des données du serveur et essaye de les remplir côté client.

Toutes suggestions/exemples sur la meilleure façon de commencer avec cela seraient très appréciés. Merci.

  • Nicolas
javascriptjquerydatabaseajaxdynamic
24
Nicholas Kreidberg

En supposant que cet exemple 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" />

Vous pourriez avoir ce 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);
            }
          });
        });
});

Ensuite, vous avez juste un script PHP (dans ce cas lookup.php) qui prend un e-mail dans la chaîne de requête et renvoie un tableau au format JSON avec les valeurs auxquelles vous souhaitez accéder. partie qui frappe réellement la base de données pour rechercher les valeurs:

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

Vous voudrez faire d'autres choses comme désinfecter l'entrée des e-mails, etc., mais vous devriez aller dans la bonne direction.

30
Parrots

Remplissez automatiquement tous les champs de formulaire d'un tableau

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

Si vous devez accéder à la base de données, vous devez à nouveau accéder au serveur Web (pour la plupart).

Ce que vous pouvez faire, c'est utiliser AJAX, qui fait une demande à un autre script de votre site pour récupérer des données, obtient les données, puis met à jour les champs d'entrée que vous souhaitez.

Les appels AJAX peuvent être effectués en jquery avec l'appel de fonction $ .ajax (), donc cela se produira

Le navigateur de l'utilisateur entre une entrée qui déclenche un déclencheur qui effectue un appel AJAX

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

Maintenant, vous devrez pointer cet appel AJAX au script (on dirait que vous travaillez PHP) qui fera la requête que vous voulez et renverra les données.

Vous voudrez probablement utiliser l'appel d'objet JSON pour pouvoir renvoyer un objet javascript, qui sera plus facile à utiliser que de renvoyer XML, etc.

La fonction php json_encode ($ phpobj); Sera utile.

8
jskulski