根据输入到另一个字段中的数字来显示多个文本输入表单字段 [英] Show a number of text input form fields based on a number entered into another field

问题描述

我有一个表格，用户可以购买三层票.对于每个级别，用户都可以通过在纯文本输入字段中输入票证数量来选择数量.当用户通过单击另一个选项卡或跳到另一个选项卡离开该字段时，我希望在该行的下方创建许多新的表单字段，该数字源自为该特定票证级别输入到数量字段中的数字.显然，如果用户减少数量，则输入字段也应减少.

I have a form where a user may purchase three levels of tickets. With each level, the user chooses a quantity by entering the number of tickets into a plain text input field. When the user leaves that field by clicking on another or tabbing to another, I would like a number of new form fields to be created just below that line, the number derived from the number entered into the quantity field for that specific ticket level. Obviously, it the user decreases the quantity, the input fields should also decrease.

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

I was looking at the jquery.blur function but apparently it is not reliable across all browsers. Anyone have any suggestions as to how I can achieve this?

戴夫

好的，我主要是这样工作的:

OK, I have this mostly working like so:

<script type="text/javascript">

$(function(){

$(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验证，以使它们看起来像这样:

I want to add spry validation to each of the outputted text input fields so that they look like this:

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

sprytextfield(1)之后的数字需要为每个输出字段递增. (代表号已经增加).

The number after sprytextfield (1) needs to increment for each outputted field. (the delegate number is already incremented).

我不太了解该怎么做.感谢您的帮助.

I can't quite get how to do it. Any help is appreciated.

戴夫

推荐答案

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>

这篇关于根据输入到另一个字段中的数字来显示多个文本输入表单字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！