I have multiple remote modals with auto calculation in them. They're the auto calculation form that a user must select the number from drop down.
The first modal is working very well. But it's not on the later on. The javascript code is usually embed in the remote file separately.
But when any modal was triggered. The rest of modal is not working in auto calculation.
Javascript (embedded each remote file)
//clear bs
$('body').on('hidden.bs.modal', '.modal', function() {
$(this).removeData('bs.modal');
});
//currency format
function addCommas(nStr) {
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(d+)(d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
retu x1 + x2;
}
//calculator
$(document).ready(function() {
//transfer charge
$('#total').text('0');
$('#xChrg').click(function() {
if ($(this).is(':checked')) {
$('#total').text('0');
$('#p1').val('3500');
console.log('3500');
$('#p2').val('2100');
$('#bk_rem').fadeIn();
$('#n1,#n2').val(0);
} else {
$('#total').text('0');
$('#p1').val('3500');
$('#p2').val('2100');
$('#bk_rem').fadeOut();
$('#n1,#n2').val(0);
}
});
});
$('#n1,#n2').change(function() {
$('#total').text('฿' + addCommas($('#p1').val() * $('#n1').val() + $('#p2').val() * $('#n2').val()));
});
HTML
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModalHorizontal">
Example 1
</button>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModalNorm">
Example 2
</button>
<!-- Modal -->
<div class="modal fade" id="myModalHorizontal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Example 1</h4>
</div>
<!-- Modal Body -->
<div class="modal-body">
<input type="hidden" name="pid" value="6" />
<input type="hidden" name="lang" value="en" />
<div class="form-group">
<label class="col-sm-2 control-label">Price</label>
<div class="col-sm-10">
Adult <span id="adult">฿3,500</span> / Child <span id="child">฿2,100</span>
<sup class="text-danger">*(4-12 years.)</sup>
<input type="hidden" name="p1" id="p1" value="3500" />
<input type="hidden" name="p2" id="p2" value="2100" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Adult</label>
<div class="col-sm-10">
<select name="no_adult" id="n1" class="form-control width-auto">
<option value="0">-choose-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Child</label>
<div class="col-sm-10 form-kids">
<select name="no_child" id="n2" class="form-control width-auto">
<option value="0">-choose-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Total</label>
<div class="col-sm-10">
<h3 class="text-success amount" id="total"></h3>
<p class="label label-danger" id="bk_rem" style="display:none">* Van pickup from Phuket (each) Adult ฿0 / Child ฿ 0</p>
</div>
</div>
</div>
<!-- Modal Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">
Save changes
</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModalNorm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Example 2</h4>
</div>
<!-- Modal Body -->
<div class="modal-body">
<input type="hidden" name="pid" value="10" />
<input type="hidden" name="lang" value="en" />
<div class="form-group">
<label class="col-sm-2 control-label">Price</label>
<div class="col-sm-10">
Adult <span id="adult">฿3,700</span> / Child <span id="child">฿2,300</span>
<sup class="text-danger">*(4-12 years.)</sup>
<input type="hidden" name="p1" id="p1" value="3700" />
<input type="hidden" name="p2" id="p2" value="2300" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Adult</label>
<div class="col-sm-10">
<select name="no_adult" id="n1" class="form-control width-auto">
<option value="0">-choose-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Child</label>
<div class="col-sm-10 form-kids">
<select name="no_child" id="n2" class="form-control width-auto">
<option value="0">-choose-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Total</label>
<div class="col-sm-10">
<h3 class="text-success amount" id="total"></h3>
<p class="label label-danger" id="bk_rem" style="display:none">* Van pickup from Phuket (each) Adult ฿300 / Child ฿ 200</p>
</div>
</div>
</div>
<!-- Modal Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">
Save changes
</button>
</div>
</div>
</div>
</div>
