根据输入到另一个字段中的数字显示多个文本输入表单域

Question

我有一个表单，用户可以购买三层门票。对于每个级别，用户通过在纯文本输入字段中输入票数来选择数量。当用户通过点击另一个或跳转到另一个字段离开该字段时，我希望在该行的下方创建一些新的表单字段，该数字来自为特定票据级别输入数量字段中的号码。显然，用户减少数量，输入字段也应该减少。

我在看jquery.blur函数，但显然它在所有浏览器中都不可靠。任何人都有什么建议可以实现这个目标？

戴夫

---

OK，我有这主要是工作，像这样：

<script type="text/javascript"> 

$（函数（）{

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

我要轻快验证添加到每个的输出文本输入字段，以便它们看起来像这样：

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

sprytextfield（1）后面的数字需要为每个输出字段递增。 （代表号码已经增加）。

我不知道该怎么做。任何帮助表示赞赏。

Dave

Answer 1

您可以使用jQuery更改方法。像这样的东西应该可以工作 - 尽管你将不得不为了你的目的而修改它。

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

如果你不想使用.blur()功能，您可以用不同的方式：

$('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