Does not work in Safari

[filch]

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

[filch]

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