Afficher un certain nombre de champs de formulaire de saisie de texte basé sur un nombre entré dans un autre champ

Question

J'ai un formulaire où un utilisateur peut acheter trois niveaux de billets. Avec chaque niveau, l'utilisateur choisit une quantité en entrant le nombre de tickets dans un champ de saisie de texte brut. Lorsque l'utilisateur quitte ce champ en cliquant sur un autre ou en tabulant sur un autre, j'aimerais qu'un certain nombre de nouveaux champs de formulaire soient créés juste en dessous de cette ligne, le nombre dérivé du nombre entré dans le champ de quantité pour ce niveau de ticket spécifique. Évidemment, si l'utilisateur diminue la quantité, les champs de saisie devraient également diminuer.

Je regardais la fonction jquery.blur mais apparemment ce n'est pas fiable sur tous les navigateurs. Quelqu'un at-il des suggestions sur la façon dont je peux y parvenir?

Dave

---

OK, j'ai ce travail la plupart du temps comme ceci:

<script type="text/javascript"> 

$ (function() {

var input = $('<input type="text" name="delegate" id="delegate" />'); 
var newFields = $(''); 
$('#bv_qty').bind('blur keyup change', function() { 
     var n = this.value || 0; 
     if (n+1) { 
      if (n > newFields.length) { 
       addFields(n); 
      } else { 
       removeFields(n); 
      } 
     } 
    }); 
function addFields(n) { 
     for (i = newFields.length; i < n; i++) { 

      var newInput = input.clone(); 
      $(newInput).attr({'name': 'delegate' + (i + 1), 'id': 'delegate' + (i + 1)}); 
      newFields = newFields.add(newInput); 
      newInput.appendTo('#memtix'); 

      $("<br class='delegate' />").appendTo('#memtix'); 

    } 
} 

function removeFields(n) { 
    var removeField = newFields.slice(n).remove(); 
    newFields = newFields.not(removeField); 
} 

Je veux ajouter la validation Spry à chaque des champs de saisie de texte en sortie afin qu'ils ressemblent à ceci:

<span id="sprytextfield1"> 
    <input type="text" name="delegate1" id="delegate1" /> 
    <span class="textfieldRequiredMsg">Please add ticket holder name</span></span> 

Le nombre après sprytextfield (1) doit être incrémenté pour chaque champ sorti. (le numéro de délégué est déjà incrémenté).

Je n'arrive pas à comprendre comment le faire. Toute aide est appréciée.

Dave

Answer 1

Vous pouvez utiliser la méthode de modification jQuery. Quelque chose comme ceci devrait fonctionner - bien que vous deviez le modifier pour vos buts.

jQuery("input[@type='text']").change(function() { 
    var new_inputs = ''; 

    //get value for input 
    var new_val = this.val(); 
    for(i=0; i<=new_val; i++) 
    { 
     new_inputs += "<input type=\"text\" name=\"new-input-"+i+"\" />"; 
    }// for 

    //replace your container with the new inputs - there are many methods of doing this 
    jQuery('#my_input_container').html(new_inputs); 
}); 

Answer 2

Si vous ne souhaitez pas utiliser la fonction .blur(), vous pouvez utiliser une autre façon:

$('input#input1').keyup(function() { 

    var input1 = $('#input1').val(); 
    $('#input2').val(input1 - 2 ); // Use any equation here 

}); 

jsFiddle

Answer 3

jQuery

$(function() { 

    var input = $('<input type="text" />'); 
    var newFields = $(''); 

    $('#qty').bind('blur keyup change', function() { 
     var n = this.value || 0; 
     if (n+1) { 
      if (n > newFields.length) { 
       addFields(n); 
      } else { 
       removeFields(n); 
      } 
     } 
    }); 

    function addFields(n) { 
     for (i = newFields.length; i < n; i++) { 
      var newInput = input.clone(); 
      newFields = newFields.add(newInput); 
      newInput.appendTo('#newFields'); 
     } 
    } 

    function removeFields(n) { 
     var removeField = newFields.slice(n).remove(); 
     newFields = newFields.not(removeField); 
    } 
});​ 

html

<label>Quantity</label><input type="text" id="qty" name="qty" /> 

<div id="newFields"></div> 

crazy demo