Show a number of text input form fields based on a number entered into another field

Question

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.

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?

Dave

Answer 1

You can use the jQuery change method. Something like this should work - though you will have to modify it for your purposes.

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

If you don't want to use .blur() function, you can use a different way:

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

Answer 4

OK, I have moved to this point:

<script type="text/javascript">

$(function() {

var input = $('<input type="text" name="delegate" id="delegate" />');
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();
            $(newInput).attr({'name': 'delegate' + (i + 1), 'id': 'delegate' + (i + 1)});
            newFields = newFields.add(newInput);
            newInput.appendTo('#newFields');

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

    }
}

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

});​

This works fine but I still need to have a label for each new field and seem to be brain dead. I have tried a number of ways to do this with not much success. Can anyone suggest the proper way to add the label in? Also, if you see things wrong with what I am doing here, please suggest a better way so I can learn.

Dave

Answer 5

OK, I have this mostly working like so:

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

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>

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.

Dave