Utilisation de jQuery pour "auto-remplir" une deuxième zone de texte, basée sur l'entrée du premier

Question

Très bien, donc ce que j'essaie de faire est d'utiliser la valeur (qui est le plus souvent autocompleted) d'une zone de texte pour remplissez une autre zone de texte avec des données extraites de la base de données.

L'utilisateur saisira un nom dans une case et une fois que cette entrée perd le focus, une seconde est remplie automatiquement avec l'adresse e-mail associée au nom.

J'ai vu quelques plugins jQuery différents qui sont similaires à ce que je veux, mais ne fonctionnent que pour les sélections (ce que je ne veux pas car il y a la possibilité que le nom sera un nouveau à ajouter).

Je sais que quelqu'un va dire quelque chose du genre: "Eh bien, pourquoi ne pas simplement tirer le nom et l'adresse e-mail de la base de données et remplir le formulaire au chargement de la page." La réponse: parce que le nom sera ajouté à la volée (pensez à un logiciel de suivi des commandes, lorsque vous ajoutez une nouvelle commande). J'utilise PHP, MySQL, et bien sûr jQuery.

Merci d'avance.

Answer 1

vous n'avez pas besoin d'un plug-in pour ce faire, il suffit d'appeler .post $ à l'événement de flou

$("#name").blur(function() { 
    $.post(your_php_file, { name: $(this).val() }, function (data) { 
     $("#email").val(data); 
    }); 
}); 

Dans votre fichier php, vous serez en mesure d'obtenir le nom avec $_POST["name"] et d'envoyer l'e-mail de retour au javascript, echo juste

Si vous avez besoin de charger plus de données que seule une chaîne, vous devez utiliser json_encode() pour encoder un tableau

$name = $_POST["name"]; 
//pick data from db 
$arr = array("email"=>$email, "otherstuff"=>$otherstuff); 
echo json_encode($arr); 

Et le changement votre appel à ce poste:

$.post(your_php_file, { name: $(this).val() }, function (data) { 
    $("#email").val(data.email); 
    $("#otherstuff").val(data.otherstuff); 
}); 

Answer 2

Voici ce qu'il pourrait ressembler à côté client:

$('#name').blur(function(){ 
    str = $('#name').val() 
    $.get("lookupemail.php", { name: str}, function(data){ 
    $('#email').val(data); 
    });  
}); 

Lorsque le champ « nom » perd le focus envoyer une demande à lookupemail.php avec le paramètre « name » réglé sur le champ « nom ». Lorsque la demande est renvoyée, placez-la dans le champ "email".

Answer 3

vous pouvez faire quelque chose comme ça ...

$('#input_1').blur(function(){ // blur event, when the input box loses focus... 
    var data = this.value;  // get the data of the this inputbox, in our case id="input_1" 
    $.ajax({ 
     url: 'some/url.php', // your php that is used to query MySql 
     method: 'get',  // method to be used , get/post 
     data: { 
      'foo' : data // the data to be passed, e.g. ?foo=data 
     } 
     success : function(msg){ // when connection to server is successful, msg is the data returned from 'some/url.php' 
      $('#input_2').val(msg); // populate the second inputbox with msg... 
     } 
    }); 
}); 

de codes ci-dessus que de jQuery, vous pouvez faire $_GET['foo'] en php ... et vous devriez echo les données nécessaires pour la deuxième inputbox ... .