crazy demo

Question

我有一个表单，用户可以购买三个级别的票证。对于每个级别，用户通过在明文输入字段中输入票证数来选择数量。当用户通过点击另一个字段离开该字段或者标签到另一个字段时，我希望在该行下面创建一些新的表单字段，该数字来自该特定票证级别的数量字段中输入的数字。显然，用户减少了数量，输入字段也应该减少。

我正在查看jquery.blur函数，但显然它在所有浏览器中都不可靠。任何人都有任何关于如何实现这一目标的建议吗？

戴夫

好的，我的工作原理如下：

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

我想为每个输出的文本输入字段添加spry验证，使它们看起来像这样：

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

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

我无法理解如何做到这一点。任何帮助表示赞赏。

戴夫

Answer 1

的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

Answer 2

您可以使用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 3

如果您不想使用.blur()功能，可以使用其他方式：

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

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

});

jsFiddle

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

3 个答案:

crazy demo