jQuery/Bootstrap弹出窗口，将费用添加到运行费用计算器中

jQuery / Bootstrap Pop up window adding Fees to Running Fee Calculator

本文关键字：添加 运行费 计算器 Bootstrap 窗口 jQuery      更新时间：2023-09-26

好吧，由于某些原因，我无法使它在本例中正常工作。。http://jsfiddle.net/hwcu7e05/

基本上，我有一个费用计算器，当用户处理表单时，它会计算费用。在这个例子中，有一个复选框，当点击它时，它应该会弹出一个div并显示Fees$225（由于某种原因，它在我的页面上有效，在这个例子上不会）。我试图做的是从我的下拉列表中添加费用，弹出一个新窗口，询问他们是否想添加该价格

我希望它在他们点击接受时将价格添加到我在表单上的运行总数中。这很困难，因为表单是JavaScript，现在我正试图将这个jQuery/bootstrap添加到其中。

对不起，我是个新手，正在尝试掌握这一切，非常感谢您的帮助

PS。看起来有很多代码，但对于这个例子来说是必要的（跳到这个例子，不必看全部：）

HTML

    Check if
<input 
  type="checkbox" 
  id="IRF" 
  name='IRF' 
  onclick="calculateTotal()" />
<br>
<select name="SPECIAL" id="SPECIAL">
  <option>Please Select</div>
    <option 
      data-name="Animal Friend" 
      data-img="/images/img/AnimalFriend.png" 
      data-price="30" 
      value="1">Animal Friend</option>
   <option 
      data-name="Aquaculture" 
      data-img="/images/img/Aquaculture.png" 
      data-price="25" 
      value="2">Aquaculture</option>
   <option 
      data-name="Protect Our Oceans" 
      data-img="/images/img/ProtectOurOceans.png" 
      data-price="20" 
      value="3">Protect Our Oceans</option>
</select>
      <!-- Modal -->
<div class="modal fade" id="modal_special" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <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">Specialty Plate</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-primary accept">Accept</button>
      </div>
    </div>
  </div>
</div>

显示费用HTML

<div id="totalPrice"></div>

JavaScript/jQuery/BootStrap

function initialRegFee()
{
    var initialFee=0;
    var theForm = document.forms["form"];
    var iRF = theForm.elements["IRF"];
    if(iRF.checked==true)
    {
        initialFee=225;
    }
    return initialFee;
}
function calculateTotal()
{
    var titleFees = initialRegFee();
    var divobj = document.getElementById('totalPrice');
    divobj.style.display='block';
    divobj.innerHTML = "Estimated Transfer Fees $"+titleFees;
}
function hideTotal()
{
    var divobj = document.getElementById('totalPrice');
    divobj.style.display='none';
}
$(function() {
        $('#SPECIAL').on('change', function() {
            if ($('option:selected', this).is('[data-img]')) {
                $('#modal_special').find('.modal-title').html($('option:selected', this).data('name'));
                $('#modal_special').find('.modal-body').html('')
                .append('<img alt="coming soon" src="' + $('option:selected', this).data('img') + '"/><br/><br/>                 Would you like to add this license plate for: $' + $('option:selected', this).data('price') + ' ?')
                .end().modal('show');
            }
        });
        $('.accept').on('click',function() {
            //do something
            $('#modal_special').modal('hide');
        });
    });

我不是专家，但我在HTML中看不到任何表单标记，所以这可能与它有关…而且在jsfiddle中的模态前后都有<div id="totalPrice"></div>。你在哪里叫hideTotal()和calculateTotal()？

编辑：

这对我很有效。http://jsfiddle.net/hwcu7e05/5/

我从html顶部的input标记中删除了onclick，然后将JavaScript改为：

var specialFee = 0;
$(function(){   //added by me
        $('#IRF').click(function(){   
           calculateTotal();   
        });
    });

function initialRegFee()
{
    var initialFee=0;
    var theForm = document.forms["form"];
    var iRF = document.getElementById('IRF');
    if(iRF.checked==true)
    {
        initialFee=225;
    }
    return initialFee;
}
function calculateTotal()
{
    var titleFees = initialRegFee();
    titleFees += specialFee;

    var divobj = document.getElementById('totalPrice');
    divobj.style.display='block';
    divobj.innerHTML = "Estimated Transfer Fees $"+titleFees;
}
function hideTotal()
{
    var divobj = document.getElementById('totalPrice');
    divobj.style.display='none';
}
$(function() {
        $('#SPECIAL').on('change', function() {
            if ($('option:selected', this).is('[data-img]')) {
                $('#modal_special').find('.modal-title').html($('option:selected', this).data('name'));
                $('#modal_special').find('.modal-body').html('')
                .append('<img alt="coming soon" src="' + $('option:selected', this).data('img') + '"/><br/><br/>                 Would you like to add this license plate for: $' + $('option:selected', this).data('price') + ' ?')
                .end().modal('show');
            }
        });
        $('.accept').on('click',function() {
            specialFee = $('option:selected').data('price');
            calculateTotal();
            $('#modal_special').modal('hide');
        });
    });
相关文章：