Bootstrap 3 - Form inside modal

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<h2>
How to make the modal content auto calculate?
</h2>
<!-- 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">&times;</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...

JavaScript

//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');
    }
    return 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()));
  });