Hello,

I have the following code, which shows a number of form text input fields, depending on a number entered into another field:

<script type="text/javascript">
$(function() {

    var input = $('<input type="text" name="delegate" id="delegate" />');
    var newFields = $('');
    var input2 = $('<input type="text" name="non_delegate" id="non_delegate" />');
    var newFields2 = $('');
    var input3 = $('<input type="text" name="add_delegate" id="add_delegate" />');
    var newFields3 = $('');


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

$('#mc_qty').bind('blur keyup change', function() {
        var n = this.value || 0;
        if (n+1) {
            if (n > newFields2.length) {
                addFieldsNonMember(n);
            } else {
                removeFieldsNonMember(n);
            }
        }
    });
    
    $('#aw_qty').bind('blur keyup change', function() {
        var n = this.value || 0;
        if (n+1) {
            if (n > newFields3.length) {
                addFieldsAdditional(n);
            } else {
                removeFieldsAdditional(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);
    }
    
    function addFieldsNonMember(n) {
        for (i = newFields2.length; i < n; i++) {
            
                var newInput2 = input2.clone();
                $(newInput2).attr({'name': 'non_delegate' + (i + 1), 'id': 'non_delegate' + (i + 1)});
                newFields2 = newFields2.add(newInput2);
                newInput2.appendTo('#nonmemtix');
                
                $("<br class='delegate' />").appendTo('#nonmemtix');
            
        }
    }

    function removeFieldsNonMember(n) {
        var removeField = newFields2.slice(n).remove();
        newFields2 = newFields2.not(removeField);
    }
    
    function addFieldsAdditional(n) {
        for (i = newFields3.length; i < n; i++) {
            
                var newInput3 = input3.clone();
                $(newInput3).attr({'name': 'add_delegate' + (i + 1), 'id': 'add_delegate' + (i + 1)});
                newFields3 = newFields3.add(newInput3);
                newInput3.appendTo('#additionaltix');
                
                $("<br class='delegate' />").appendTo('#additionaltix');
            
        }
    }

    function removeFieldsAdditional(n) {
        var removeField = newFields3.slice(n).remove();
        newFields3 = newFields3.not(removeField);
    }
    
});​


    
window.onload=function(){
    var defaultDate = new Date();
    var todayStr = defaultDate.getMonth()+1+"/"+defaultDate.getDate()+"/"+defaultDate.getFullYear();
        document.forms[tickets].order_date.value = todayStr;
        
    }





</script>

So, when someone enters a new number into one of the quantity fields i.e.:

<tr>
                <td class="labels">Member Tickets ( enter names below - one for each field )</td>
                <td class="calcOutput labels" id="bv_cost" name="bv_cost">$199.00</td>
                <td class="calcOutput labels"><input id="bv_qty" name="bv_qty" size="4" maxlength="4" onblur="newqty('bv');"></td>
                <td class="calcOutput labels"><input id="bv_ttl" name="bv_ttl" size="7" maxlength="7" readonly="true"></td>
              </tr>
              <tr>
                <td><div id="memtix"></div></td>
              </tr>
              <tr>
                <td>Non-Member Tickets ( enter names below - one for each field )</td>
                <td class="calcOutput" id="mc_cost" name="mc_cost">$249.00</td>
                <td class="calcOutput"><input id="mc_qty" name="mc_qty" size="4" maxlength="4" onblur="newqty('mc');"></td>
                <td class="calcOutput"><input id="mc_ttl" name="mc_ttl" size="7" maxlength="7" readonly="true"/></td>
              </tr>
              <tr>
                <td><div id="nonmemtix"></div></td>
              </tr>
              <tr>
                <td>Additional Tickets ( enter names below - one for each field )</td>
                <td class="calcOutput" id="aw_cost" name="aw_cost">$99.00</td>
                <td class="calcOutput"><input id="aw_qty" name="aw_qty" size="4" maxlength="4" onblur="newqty('aw');"></td>
                <td class="calcOutput"><input id="aw_ttl" name="aw_ttl" size="7" maxlength="7" readonly="true"></td>
              </tr>

It should show a number of extra fields, matching the quantity. This works on all browsers EXCEPT Safari, which surprises me. Anyone have any ideas why?

Thanks,

Dave

Apparently, it does not work reliably in IE either as, when I was at home, it worked. At the college, it did not work in IE. Does the order or the event in the code make a difference?

Dave

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.