Ajout de boutons de saisie à l'aide de JQuery

Question

J'ai un problème intéressant à résoudre. Un client veut entrer un identifiant client (en utilisant un scanner) dans un élément d'entrée et en utilisant AJAX, il remplira un autre élément d'entrée avec le nom du client. Un nouvel élément d'entrée doit être ajouté et le focus doit être défini pour que le client puisse entrer un autre identifiant client. J'ai deux problèmes que j'ai besoin d'aide pour résoudre. Tout d'abord, je dois capturer l'entrée envoyée par le scanner et passer à l'élément d'entrée nouvellement ajouté. Deuxièmement, j'ai besoin d'ajouter des événements au nouvel élément d'entrée pour gérer l'appel AJAX et l'entrée suivante envoyée par le scanner. Toute aide serait grandement appréciée.

Wade

Answer 1

Voici un modèle assez simple, vous pouvez travailler à partir de:

<form> 
    <fieldset> 
     Customer ID: <input name="id" /> 
     Customer Name: <input name="name" /> 
    </fieldset> 
</form>​​​​​​ 

avec Ja vascript:

​jQuery(function($) { 
    var form = $('form'), 
     fieldset; // defined here but set below after we get our event attached 

    $('input[name=id]').keyup(function(e) { 
     if(e.keyCode === 13) { 
      var clone = fieldset.clone(true).appendTo(form); 

      clone.children('input[name=id]').focus(); 

      $.get('getCustomerName.php', {id: this.value}, function(data) { 
       clone.children('input[name=name]').val(data); 
      }); 
     } 
    }); 

    fieldset = $('fieldset').clone(true); // clones our fieldset template with events 
});​ 

Answer 2

@ Wade73, l'ajout d'un nouveau contrôle est le peu facile. Vous aurez besoin de choisir un élément pour placer le contrôle dans ou à bien.

$('#PlaceButtonIn').appendTo("new button html"); 
$('#PlaceButtonIn').append("new button html"); 

#PlaceButtonIn peut être un div ou un td ou quelque chose d'utile pour placer le nouveau contrôle.

De nouveaux contrôles ne dispose pas d'utiliser ainsi le Commend en direct pour cela.

$('#PlaceButtonIn').append("<input type='button' class='NewButton'>"); 

$(document).ready(function(){ 

    $('.NewButton').live('click', function() { //Do click event here }); 

}); 

La classe NewButton n'a pas besoin d'exister dans votre CSS. C'est un moyen pratique d'utiliser le sélecteur jQuery si vous ne connaissez pas les identifiants de contrôle ou les noms.

J'espère que cela vous sera utile.

Answer 3

Peut-être que cela peut répondre à votre doute:

Lorsque l'entrée se concentrer

$('#inputId').focus(function(){ 

     ///your code here 
    }); 

Ou

$('#inputId').keypress(function(e) { 
    if(e.keyCode == 13) { 
     //your code here 
    } 
});