Lecture et ajout de données de formulaire en direct avec javascript

Question

J'ai cherché la solution à ce problème pendant un certain temps et je dois trouver une réponse suffisamment conviviale pour que je puisse comprendre sa mise en œuvre. Voici ma situation:

Je crée un système de numérotation de documents basé sur le Web, simple et petit, qui prend les données saisies dans un formulaire et les combine pour former un numéro de document. Un exemple serait: Un utilisateur entre un code de classe (CCC), un numéro de base (BBBB) et un numéro de tiret (DDD). Le numéro de document résultant serait CCC-BBBB-DDD. Super simple. Je l'ai écrit tout cela dans la base de données et tout ce jazz. Je voudrais juste ajouter un ajout convivial.

Je veux une petite chaîne de génération en direct en haut qui montre quel sera le numéro de document lorsque l'utilisateur éditera chaque champ avant qu'ils n'appuient sur la soumission. Un peu comme cet exemple: http://inimino.org/~inimino/blog/javascript_live_text_input

Je ne sais presque rien sur javascript, donc ce serait vraiment utile de savoir, 1: à quoi le script devrait ressembler, 2: Et comment ce script s'interface avec le formulaire html.

Heres ce que la forme ressemble à:

 <form action="submit.php" method="post"> 
     Enter Title:<input type="text" name="title" size="20"><BR> 
     Enter Class Code:<input type="text" name="class" size="20"><BR> 
     Enter Base Number:<input type="text" name="base" size="20"><BR> 
     Enter Dash Number:<input type="text" name="dash" size="20"><BR> 
     <input type="submit" value="Submit"> 

Merci beaucoup pour toute aide que vous pouvez offrir. Je suis sûr que ce n'est pas trop dur pour quelqu'un de bien versé.

Thomas

Answer 1

D'après ce que je comprends ce qui devrait faire ce que vous décrivez.

$('#yourForm input').bind('keyup', function(e) { 
    var docNum = 'Your Document Number: <br/>'+$('input[name="class"]').val() + '-' + $('input[name="base"]').val() + '-' + $('input[name="dash"]').val(); 
    $('#preview').html(docNum); 
});​ 

Pour votre deuxième question, dans la façon dont il s'interface avec le formulaire HTML. Le premier sélecteur jQuery #yourForm input va chercher n'importe quel <input> qui tombe sous un <form id='yourForm'>. Il lie ensuite l'événement keyup pour déclencher la fonction. La fonction prend la valeur du <input> avec la valeur name de classe, base et tiret ainsi que la mise en forme et crée une variable nommée docNum. docNum est ensuite inséré dans l'élément avec l'ensemble id à prévisualiser, ce qui dans l'exemple Fiddle est un div juste au-dessus du formulaire.

http://jsfiddle.net/nuY2M/

Answer 2

Inclure cet html où vous voulez que le numéro aperçu à l'affichage:

Document #: 
<span id="classPreview"></span> 
- 
<span id="basePreview"></span> 
- 
<span id="dashPreview"></span> 

Ajouter ce script pour remplir les valeurs suivantes:

function updateDocNumPreviewPart(fieldName) 
{ 
    var preview = document.getElementById(fieldName + "Preview"); 
    var field = document.forms[0][fieldName]; 
    preview.innerHTML = field.value; 
} 
function updateDocNumPreview() 
{ 
    updateDocNumPreviewPart("class"); 
    updateDocNumPreviewPart("base"); 
    updateDocNumPreviewPart("dash"); 
} 

Enfin, ajouter du code à les champs de votre formulaire pour appeler le script:

<input ... onkeyup="updateDocNumPreview()" onchange="updateDocNumPreview()" />