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